Subscribe And Follow Icons Gadget Using Sprite Effect For Blogger




| 19 comments

Subscribe And Follow Icons SpriteA 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.

View Demo Button

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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


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

19 comments:

  1. hello
    my blog not orginal!
    my mean i add other templat
    plz tut this about!
    tnx very much!

    ReplyDelete
  2. WoW very good Awesome tut thanks sharing this tutorial :)

    today i am very happy read this blog Awesome very awesome informative blog :)

    ReplyDelete
  3. Thank you, your tutorials helped me a lot...

    ReplyDelete
  4. I tried this and its not working. There are no icons? Do I have to provide my own images for the social icons for it to work?

    ReplyDelete
    Replies
    1. Tee, the icons should show the image for them is in the css code.Make sure you added the code in step 2 properly...

      Delete
  5. i cannot seem to get the url right for Google+. i went to my Google+ Profile page & copied that url, but when i click the icon on my blog, it actually opens the HTML gadget window. i notice right away in your example, the /b/ & mine https://plus.google.com/u/0/somelongstringofnumbers/posts. what have i copied wrong?

    ReplyDelete
  6. nevermind, just modified mine to look more like your link replacing the /u/0/ with /b/ & repeating the /somestringofnumbers/ like yours is. i do not pretend to understand it, but it works now!

    ReplyDelete
  7. Is there a social sprite for pinterest. I am not very vell versed in this but i am giving it a try.

    ReplyDelete
  8. Hi, I have another question, I'm going to start by saying thay i tried it on my blog http://110fashionista.blogspot.com/ but as you can see there those icons are not the best for my blog, I don't know if there are aditional libraries available so i can pick an apropiate one for my blog, or simply if there is a way to upload a custom one myself,

    ReplyDelete
  9. Don't worry I'm not only suscribed but I have a direct tab on my browser interface, I really want to customize my blog to a desired way

    ReplyDelete
  10. Brilliant! Thank you. Are you able to provide an icon for Pinierest? I would like to add that in if possible?

    ReplyDelete
  11. Thanks for posting this. my blog is
    www.youandyourdecor.blogspot.com

    and I cannot get the icons to show up, only the list. I copied and pasted to the css, what did I miss?

    ReplyDelete
  12. Man I love your youtube background style!
    Can you please teach me this.. I've been a regular customer of SUYB and I've been wondering about this :)
    Thanks.
    Nick

    ReplyDelete
    Replies
    1. Nick this is the image I use - http://3.bp.blogspot.com/-cBE7Z5fNPtQ/T76axZDCaYI/AAAAAAAAGe0/itWf287vlFQ/s1600/Youtube-video-background.png

      Delete
  13. The gadget looks cool, when installed in blog, but it increases overall html size which is not good for SEO.

    ReplyDelete
    Replies
    1. The size is not so big as to have a major affect on page spped and thus SEO.

      Delete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us