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.
You can check out a live demo below, the icons are at the top of the sidebar and credit goes to Rob Cubbon, make sure to check out his site. As we are using a sprite unless you create a new sprite image you cant add extra icons.
Add Css Sprite Social Icons To Your Blog
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, as shown in the video below.
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(http://1.bp.blogspot.com/-IWFniHoyd3A/T-YdTpaOuKI/AAAAAAAAG-0/tB_K-9hn02U/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.spiceupyourblog.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/spiceupyourblog">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=SpiceUpYourBlog&loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/spiceupyourblog">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/paulcrowepro">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/SpiceUpYourBlog">YouTube</a></li>
</ul>
</div>
<!--Social Sprite Html http://www.spiceupyourblog.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.
