Candy Social Icons With Pop-out Effect for Blogger and Wordpress

After a longtime we are back again with a new post.Today we have pop out effect candy social icons which link to your social profiles.The icons are designed specially in such a way that they ch the attention of the rders and are so sy to add to your blog.This icons allows your rders to quickly followon your favorite social networks and we have icons for your Rss Feed, Email, Facebook, Twitter, Google+, LinkedIn, YouTube and Skype.

Live Demo :





Adding The Candy Social Icons To Blogger


Steps: In The New Blogger Dashboard
1)Click The Drop Down For Your Blog >
2)Choose Layout >
3)Click Add A Gadget >
4)Choose HTML/Javascript >
5)Paste The Below in it

: (copy this in notepad before copying to your blog)

<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="RSS-FEED-URL-HERE" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="EMAIL-URL-HERE" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="FACEBOOK-URL-HERE" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="TWITTER-URL-HERE" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="LINKEDIN-URL-HERE" target="_blank"><img src="http://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="YOUTUBE-URL-HERE" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<a class="spice-popout" rel="nofollow" href="SKYPE-URL-HERE" target="_blank"><img src="http://i.imgur.com/8c35IfD.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all se 0.5s; -moz-transition:all se 0.5s; -o-transition:all se 0.5s; -ms-transition:all se 0.5s; transition:all se 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all se 0.5s; -moz-transition:all se 0.5s; -o-transition:all se 0.5s; -ms-transition:all se 0.5s; transition:all se 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>

Note : Add the Link to ch of your social profiles as highlighted in Red.ch icon has the title above so you can sily remove the ones you don't want.


Adding The Candy Social Icons To Wordpress

Steps:In Your Wordpress Dashboard
1)Click 'Apperance' > 'Widgets' >
2)Add A text Widget to your sidebar and
3)paste in the

:(copy this in notepad before copying to your blog)

<!--Rss Feed-->
<a class="spice-popout" rel="nofollow" href="RSS-FEED-URL-HERE" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>
<!--Email-->
<a class="spice-popout" rel="nofollow" href="EMAIL-URL-HERE" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>
<!-- Google Plus-->
<a class="spice-popout" rel="nofollow" href="GOOGLE-PLUS-URL-HERE" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>
<!--Facebook-->
<a class="spice-popout" rel="nofollow" href="FACEBOOK-URL-HERE" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>
<!--Twitter-->
<a class="spice-popout" rel="nofollow" href="TWITTER-URL-HERE" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>
<!--LinkedIn-->
<a class="spice-popout" rel="nofollow" href="LINKEDIN-URL-HERE" target="_blank"><img src="http://i.imgur.com/dofbMIX.png" /></a>
<!--YouTube-->
<a class="spice-popout" rel="nofollow" href="YOUTUBE-URL-HERE" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<!--Skype-->
<a class="spice-popout" rel="nofollow" href="SKYPE-URL-HERE" target="_blank"><img src="http://i.imgur.com/8c35IfD.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all se 0.5s; -moz-transition:all se 0.5s; -o-transition:all se 0.5s; -ms-transition:all se 0.5s; transition:all se 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all se 0.5s; -moz-transition:all se 0.5s; -o-transition:all se 0.5s; -ms-transition:all se 0.5s; transition:all se 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>

Note : Add the Link to ch of your social profiles as highlighted in Red.ch icon has the title above so you can sily remove the ones you don't want.

~Special Thanks to Paul Crowe(owner of Spiceupyourblog) for crting the ~