Subscribe And Follow Icons Gadget Using Sprite Effect For Blogger

Become a guest author on Create the Blogger.

A friend had asked me for help implementing some social icons using a sprite technique she had seen a tutorial for on Rob Cubbon's blog.I came to her aid and the result was great and using sprites has some advantages.By using a sprite image we can easily display the icons in black and white they then change to color on hover.Also we only use one image instead of 14 which helps with the load speed of your blog.It worked so well I decided to provide the tutorial for all our readers.Once added to your Blogger sidebar it will display icons for Google +, Your Rss Feed, Email Feed, Facebook, Twitter, LinkedIn and YouTube.

Add Css Sprite Social Icons To Your Blog

Remember Always Back Up Your Template Before You Make Changes

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/AVvXsEihI9ZuimAz69cGSgbJNW7zn2JMRe4cXaOARwIxQ6Mguj7GkGez5n4mqvJDp80os6EaGwJfWTAntTptLVS7KEJwzJRgPrlRV5QTUCYekbeqD9-v3ck3NQdQX210uhFuVqkzw5KpJh_G1y7a/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.createtheblogger.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/u/0/114664599119980888174/posts">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/createtheblogger">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=createtheblogger&loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://www.facebook.com/pomoczabloggere">Facebook</a></li>
<li id="twit"><a href="https://twitter.com/BestBloggerTips">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/profile/view?id=62595960">LinkedIn</a></li>
<li id="youtube"><a href="YOUR YOUTUBE ADRESS">YouTube</a></li>
</ul>
</div>
<!--Social Sprite Html http://www.createtheblogger.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 Below.