Wednesday, January 21, 2015

Cool Hover Effects Social Media Widget For Blogger

This widget Social Media best fan on (Facebook) and followers on (Twitter), or subscribers on (Rss) feeds and social media platform to get followers social media has its importance for blog/website traffic. Also are much important for a blogger. So enjoy this cool colored Hover Effects Social Media Widget To Blogger.
Add this widget to your blogger navigation bar just follow these steps below.
1: Go to Templates >>> Edit HTML >>>  

2: Now Press Ctrl+F to Find  ]]></b:skin>  and paste the following CSS code just above it. 

/*-----------------MyBloggerTools--------------------*/ul#icon-socialmn{float:right}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:#99E0FE}ul#icon-socialmn a{background-position:-25px 7px}ul#icon-socialmn a:hover{background-color:#0033CC}ul#icon-socialmn a{background-position:-54px 7px}ul#icon-socialmn a:hover{background-color:#B22400}ul#icon-socialmn a{background-position:-85px 7px}ul#icon-socialmn a:hover{background-color:#FF6600}

4: Now Save your template
5: Now paste the following code where you want to show the Social Media Widget.

<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="" target="_blank">twitter</a></li><li class="social-facebook" style="background-color: black;"><a href="" target="_blank">facebook</a></li><li class="social-google" style="background-color: black;"><a href="" target="_blank">google</a></li><li class="social-rss" style="background-color: black;"><a href="" target="_blank">rss</a></li></ul></div>

6: Change with your Twitter (URL)
7: Change with your Facebook (URL)
8: Change with your Google Plus (URL)
9: Change with your Feed-burner (URL)
10: Save your Layout

your cool social sharing widget is installed successfully! So enjoy this. :)

Previous Post
Next Post