Friday, July 13, 2012

Black And White Social Network Widget With Color Hover Style For Blogger

As I told earlier ,social bookmarking is very
important for bloggers.Because we can get
quality traffic.If you have account in social
networks. you can link to account from your
blog.So , this tutorial will help you to link
your social networks from your blog.It
include nice hover style too. Earlier i posted
How To Add Simple Subscribe Widget To
. Go to end post for demo.

1. Log in to blogger account and Go to Design >> Edit HTML
2. Find this tag by using Ctrl+F    ]]></b:skin>

3. Paste below code Before ]]></b:skin> tag

*social icons*/
#head-soc{width:300px }
#head-soc ul li {list-style :none; padding: 0 0 0 1px; float: left;}
#head-soc ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden ; height: 32px; width: 32px ;border: 0; background: url( 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 Icons */

4. Now Go to Design >> Page Element

5.  Click Add Gadget and select 'HTML/Javascript'

Paste below code

<div id="head-soc">
<li id="g"><a href="
<li id="rss"><a href="">RSS Feed</a> </li>
<li id="sub"><a href=";loc=en_US">Subscribe</a></li>
<li id="fb"><a href="">Facebook</a></li>
<li id="twit"><a href="">Twitter</a></li>
<li id="li"><a href="">LinkedIn</a></li>
<li id="youtube"><a href="">YouTube</a></li>

*Replace 107955298793879607964 With your Google Plus profile id
*Replace Bloggertrix with your feedburner name
*Replace Bloggertrix with your Facebook username
*Replace Bloggertrix with your Twitter Username
*Replace Username with your Youtube username
*Replace Username with your Youtube username

6.  Save HTML/Javascript. you are done.



  1. love it! absolutely brilliant! thank you for this. unfortunately I don't use Facebook, so is it possible to change the FB button to a Pinterest button?

  2. @Kelly,
    Its possible, In 3rd step code, you can find the image link, just replace it with below image link.

    Now in 6th step, replace Facebook link with your Pinterest link.
    hope you understood it. if not, contact me via contact us page. i will help you.

  3. @Bloggertrix

    Yah! It works!! you're a genius. Thank you for getting back to me so quickly too. Love your blog site.