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
Blogger. 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 bloggertrix.com*/
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEZ1DBQdJEMx9kMKhIsgaaFQCeAkzwEa0fWGfa_TIEylDFXvQ5LvQ0A7xPmvbMcdjJtSr09bA98MUvGfKsHtiwXhhDJa9WpKhrJGmTtglxncdeAN-5vlGxnjjXiIV7C-mZ3qlPv3vC37Kl/s1600/bloggertrix.com-image.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 Icons bloggertrix.com */

4. Now Go to Design >> Page Element

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

6.  Paste below code

<div id="head-soc">
<ul>
<li id="g"><a href="https://plus.google.com/107955298793879607964
">Google+</a></li>
<li id="rss"><a href="http://feeds.feedburner.com/bloggertrix">RSS Feed</a> </li>
<li id="sub"><a href="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix&amp;loc=en_US">Subscribe</a></li>
<li id="fb"><a href="http://facebook.com/bloggertrix">Facebook</a></li>
<li id="twit"><a href="http://twitter.com/bloggertrix">Twitter</a></li>
<li id="li"><a href="http://www.linkedin.com/Username">LinkedIn</a></li>
<li id="youtube"><a href="http://www.youtube.com/username">YouTube</a></li>
</ul>
</div>

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

Demo

• Google+
• RSS Feed
• Subscribe
• Facebook
• Twitter
• LinkedIn
• YouTube