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
Blogger
. Go to end post for demo.

color-hover-with+back-and-white
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

3 comments:

  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?

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

    http://1.bp.blogspot.com/-KSWOMndk8tI/UAbnthh_zsI/AAAAAAAAA-w/yP2QaBu6id4/s1600/bloggertrix.png

    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.

    ReplyDelete
  3. @Bloggertrix

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

    ReplyDelete