Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks / Other » How to Add CSS Sprite Social Icons

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Add CSS Sprite Social Icons

How to Add CSS Sprite Social Icons

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


Paul Crowe has once again displays another great tutorial, this time it’s how to add CSS sprite social icons to your Blogger.

Before you start making any changes, make sure you backup your template. Here are the steps:

  1. Go to Blogger Dashboard > Drop Down Menu For Your Blog > Customize > Advanced > Add CSS.

Here’s a vid by Crowe so you can follow it easily.

<iframe width=”450″ height=”315″ src=”http://www.youtube.com/embed/GbzyPFnDcDo” frameborder=”0″ allowfullscreen></iframe>

2. In the CSS section, copy and paste the codes below:

/*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 */

3. Add the icons’ HTML and your social media profiles’ URLs.

4. In the Layout page, select Add a Gadget for your sidebar then paste the following code below into the HTML/Javascript. Change the highlighted URLs with your own.

<!--Social Sprite Html-->
<div id="head-soc">
<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>
<!--Social Sprite Html http://www.spiceupyourblog.com-->

5. Save.



Liked It ? Please Share

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here