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.
LIVE DEMO
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(http://4.bp.blogspot.com/-N4edxxbrzLo/VL-hRWLT1KI/AAAAAAAAAs4/EYeG2XTnJZQ/s1600/mybloggertoolsicon.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:#99E0FE}ul#icon-socialmn li.social-facebook a{background-position:-25px 7px}ul#icon-socialmn li.social-facebook a:hover{background-color:#0033CC}ul#icon-socialmn li.social-google a{background-position:-54px 7px}ul#icon-socialmn li.social-google a:hover{background-color:#B22400}ul#icon-socialmn li.social-rss a{background-position:-85px 7px}ul#icon-socialmn li.social-rss 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="https://twitter.com/MyBloggerTools" target="_blank">twitter</a></li><li class="social-facebook" style="background-color: black;"><a href="https://www.facebook.com/mybloggertools" target="_blank">facebook</a></li><li class="social-google" style="background-color: black;"><a href="https://plus.google.com/103611678617885891853" target="_blank">google</a></li><li class="social-rss" style="background-color: black;"><a href="http://feeds.feedburner.com/mybloggertools/SSCv" target="_blank">rss</a></li></ul></div>

6: Change https://twitter.com/MyBloggerTools with your Twitter (URL)
7: Change https://www.facebook.com/mybloggertools with your Facebook (URL)
8: Change https://plus.google.com/103611678617885891853 with your Google Plus (URL)
9: Change http://feeds.feedburner.com/mybloggertools with your Feed-burner (URL)
10: Save your Layout

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

Previous Post
Next Post

0 comments: