Subscribe And Follow Icons Gadget Using Sprite Effect For Blogger

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template

 Step 1. - In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css,

Step 2. Copy and Paste the following code into the Css Section

/*Social Sprite Css*/
#head-soc ul li {list-style :none; padding: 0 0 0 12px; float: right;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmDd5tw-HKAlpxM2GV6_U_fAcFvNHS3il3IrLNRb8hfCB8SNbbOuHJzoaqZVxhU3c3MDDX7oAg-h1Xs1k_0dUN7J9FmZJY2DzzMRSojV1DQ076ryz_928Wcg8i0AjZKlgZmW3wn2aY_UPU/s1600/spice-up-blog-sprite.gif) no-repeat; display: block;}

#head-soc li#g a {background-position: 0px 0px;}
#head-soc li#g a:hover {background-position: 0px -32px;}

#head-soc li#rss a {background-position: -32px 0px;}
#head-soc li#rss a:hover {background-position: -32px -32px;}

#head-soc li#sub a {background-position: -64px 0px;}
#head-soc li#sub a:hover {background-position: -64px -32px;}

#head-soc li#fb a {background-position: -96px 0px;}
#head-soc li#fb a:hover {background-position: -96px -32px;}

#head-soc li#twit a {background-position: -128px 0px;}
#head-soc li#twit a:hover {background-position: -128px -32px;}

#head-soc li#li a {background-position: -160px 0px;}
#head-soc li#li a:hover {background-position: -160px -32px;}

#head-soc li#youtube a {background-position: -192px 0px;}
#head-soc li#youtube a:hover {background-position: -192px -32px;}
/*Social Sprite Css http://www.olantinowap.blogspot.com */

 Step 3. You now need to add the html for the icons and add the URLs for your social profiles.

Go to your layout page, Choose add a gadget for your sidebar, choose HTML/Javascript from the list and paste the following code into the HTML/Javascript gadget.You will need to change the URLs highlighted in yellow to yours then save.

 <!--Social Sprite Html-->
<div id="head-soc">
<ul>
<li id="g"><a href="https://plus.google.com/b/108200902911276741668/108200902911276741668/posts">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/olantinotechvilla">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=olantinotechvilla&loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/olantino">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/iam_olantino">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/profile/view?id=62595960">LinkedIn</a></li>
<li id="youtube"><a href="http://www.youtube.com/user/add your url">YouTube</a></li>
</ul>
</div>
<!--Social Sprite Html http://www.olantinowap.blogspot.com-->

 And that's a very tidy set of social and subscribe icons with a cool effect using a quick loading sprite image.

Drop Your Comments And Questions Below.

If You Enjoyed This Post Please Take 5 Seconds To Share It.