More at BBT
Loading...
2/23/2013

Add Cool Colored Hover Effects Social Media Widget To Blogger

2/23/2013
Socialize It
Social Media widgets plays key role in getting good followers on twitter, fans on facebook and subscribers on RSS or no matter on what social media platform you plan to get followers social media has its importance. It is therefore much important for a blogger also to put up a nice social media widget that attracts visitors and engage them in following you on various social media platforms.

Keeping this in view i just have come up with a very nice, cool looking and much attractive social media widget for your Navigation bar or you can also add this to your sidebar with slight customization.


How to add it


  1. To add this widget to your navigation bar or sidebar follow these simple steps.
  2. Go to Templates > Edit HTML (Make sure you create a backup of your template)
  3. Find ]]></b:skin>  and paste the following CSS code just above it
ul#icon-socialmn{float:right}
ul#icon-socialmn li{float:left;display:inline-block;position:relative}
ul#icon-socialmn li a{background-image:url(http://3.bp.blogspot.com/-JWxzfuPXWDQ/ULykR51IjoI/AAAAAAAABfk/GUjrfkEH7hc/s1600/team-social-icons.png);background-repeat:no-repeat;display:block;width:40px;height:47px;text-indent:-9999px;-webkit-transition:background .2s ease-out;-moz-transition:background .2s ease-out;-o-transition:background .2s ease-out;transition:background .2s ease-out}
ul#icon-socialmn li.social-twitter a{background-position:4px 7px}
ul#icon-socialmn li.social-twitter a:hover{background-color:#2DAAE1}
ul#icon-socialmn li.social-facebook a{background-position:-25px 7px}
ul#icon-socialmn li.social-facebook a:hover{background-color:#3C5B9B}
ul#icon-socialmn li.social-google a{background-position:-54px 7px}
ul#icon-socialmn li.social-google a:hover{background-color:#F63E28}
ul#icon-socialmn li.social-rss a{background-position:-85px 7px}
ul#icon-socialmn li.social-rss a:hover{background-color:#FA8C27}
ul#icon-socialmn li.social-linkedin a{background-position:-116px 7px}
ul#icon-socialmn li.social-linkedin a:hover{background-color:#0173B2}
ul#icon-socialmn li.social-dribbble a{background-position:-146px 7px}
ul#icon-socialmn li.social-dribbble a:hover{background-color:#F9538F}
ul#icon-socialmn li.social-pinterest a{background-position:-176px 7px}
ul#icon-socialmn li.social-pinterest a:hover{background-color:#CB2027}
4. Save your template
5. Now Wherever you want to show the Social Media Widget  paste the following code there
<div dir="ltr" style="text-align: left;" trbidi="on">
<ul class="sociico" id="icon-socialmn">
<li class="social-twitter" style="background-color: black;"><a href="Your Link Here" target="_blank">twitter</a></li>
<li class="social-facebook" style="background-color: black;"><a href="Your Link Here#" target="_blank">facebook</a></li>
<li class="social-google" style="background-color: black;"><a href="Your Link Here" target="_blank">google</a></li>
<li class="social-rss" style="background-color: black;"><a href="Your Link Here" target="_blank">rss</a></li>
<li class="social-pinterest" style="background-color: black;"><a href="Your Link Here" target="_blank">pinterest</a></li>
</ul>
</div>
For example i added this into navigation bar to show widget in navigation menu.
Note: Make Sure you have dark background to make widget look perfect You can change the background color to any color by changing  black  in above code. If you don't want any background color just remove this style="background-color: black;"  from above code in all lines and if you removed it then widget will appear there fine but it will be all in white color and will be difficult for you to notice. So it is recommended to have dark background.

If you like this widget then please share it with your friends on facebook and twitter and you can ask any question about this widget below in comments. :)


2 comments:

  1. thanks, it works (o)

    http://dammar-asihan.blogspot.com/

    ReplyDelete
  2. Excellent post. Keep writing such kind of info on your page.I am really impressed by your blog.
    website design

    ReplyDelete

 
Toggle Footer