Social Share Icons Sprite Effect For Blogger

Social Share Icons Sprite Effect For Blogger : On this small quick free blogger tips tricks tutorial you will learn how to add bookmarking share icons sprite effect for blogger, the effect is simple, using a sprite image we can easily display the icons in black and white they then change to color on hover.
Once added to your Blogger sidebar it will display icons for Google +, Your Rss Feed, Email Feed, Facebook, Twitter, LinkedIn and YouTube.
the icons are at the top of the sidebar and credit goes to Rob Cubbon.

Remember Always Back Up Your Template Before You Make Changes.

1- In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css.

2- Copy and Paste the following code into the Css Section :

/*Share Social Sprite Effect 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://3.bp.blogspot.com/-MnMXKRSismg/UBiESpmlgGI/AAAAAAAACQc/fj5dzBIqfCQ/s1600/seodesign.us-sprite-icons.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 Share Sprite Css https://www.seodesign.us */

3- Now you 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.

<!--Social Share Sprite Html-->
<div id="head-soc">
<ul>
<li id="g"><a href="https://You-page">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/seodesignpsdgraphics">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=seodesignpsdgraphics&loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/SeodesignGraphics">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/seodesign1">Twitter</a></li>
<li id="li"><a href="Your Link">LinkedIn</a></li>
<li id="youtube"><a href="Your-Blog">YouTube</a></li>
</ul>
</div>
<!--Share Social Icons Sprite Html https://www.seodesign.us-->

You are done :)