Now Reading
Add Cool Colored Hover Effects Social Media Widget To Blogger

Add Cool Colored Hover Effects Social Media Widget To Blogger

by AdminAugust 23, 2016

Social Media widgets play 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 engages 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.


source : bestblogtrickz

How to add it

  • To add this widget to your navigation bar or sidebar follow these simple steps.
  • Go to Templates > Edit HTML (Make sure you create a backup of your template)
  • Find ]]></b:skin> and paste the following CSS code just above it
ul#icon-socialmn li{float:left;display:inline-block;position:relative}
ul#icon-socialmn li a{background-image:url(;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 a{background-position:4px 7px}
ul#icon-socialmn a:hover{background-color:#2DAAE1}
ul#icon-socialmn a{background-position:-25px 7px}
ul#icon-socialmn a:hover{background-color:#3C5B9B}
ul#icon-socialmn a{background-position:-54px 7px}
ul#icon-socialmn a:hover{background-color:#F63E28}
ul#icon-socialmn a{background-position:-85px 7px}
ul#icon-socialmn a:hover{background-color:#FA8C27}
ul#icon-socialmn a{background-position:-116px 7px}
ul#icon-socialmn a:hover{background-color:#0173B2}
ul#icon-socialmn a{background-position:-146px 7px}
ul#icon-socialmn a:hover{background-color:#F9538F}
ul#icon-socialmn a{background-position:-176px 7px}
ul#icon-socialmn a:hover{background-color:#CB2027}

Save your template

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>

For example, I added this into navigation bar to show the widget in the navigation menu.

Note: Make Sure you have the 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 the 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 the 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. 🙂

Source : bestblogtrickz

Please wait...
About The Author

Leave a Response