Wordpress Style Hovering Effect Social Media Widget For Blogger

Socialize It

Tweet

Google Blogger without widgets? It cannot be! Many bloggers and developers or coders daily comes up with tons of widgets for bloggers but few of them are impassive enough to make their way to blogger's sidebar. 

Today i am going to share with you guys a widget that i just created. It is a nice looking neat and beautiful widget adapted from wordpress theme. 

It uses very well coded hovering effect with just one PNG image. So no there is no question about copying all the separate social media icons and saving them somewhere safe and then replacing each url one by one. So just sit back and relax just take the code and implement it in your website. You are good to go!

The best thing about this widget is that it goes with every theme

LIVE DEMO

How to add this widget?

1) Go to : Dashboard > Layout > Add a Gadget > HTML/JavaScript

2) Paste the following code :

<style>
/* Sidebar Widget BestBlogTricks  */
.sidebar .social_media { overflow:hidden;  }
.sidebar .social_media ul { padding:0; }
.sidebar .social_media ul li { margin:0 5px 0 0!important; float:left; padding:0; }
.sidebar .social_media .social_media_icon {width:64px; height:64px; display:block;}
* social media for sidebar ------------------- */
.sidebar .social_media .social_media_icon {}
.sidebar .social_media .twitter_icon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEVSegwZtQYGWVRAxte4r_NpJrTvbF6xQhZHnYGNomgVQWVqHEqpglsJxU0KikwXSVjCkW07J6A3ndjbvYIKDo9xrqGQcyEw26H7HLis2cOu6te3Bt64ybrfFW9Y21ZS_79BNxTYhTyE3/s1600/BBTSocial.png) no-repeat 0 0 transparent;}
.sidebar .social_media .facebook_icon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEVSegwZtQYGWVRAxte4r_NpJrTvbF6xQhZHnYGNomgVQWVqHEqpglsJxU0KikwXSVjCkW07J6A3ndjbvYIKDo9xrqGQcyEw26H7HLis2cOu6te3Bt64ybrfFW9Y21ZS_79BNxTYhTyE3/s1600/BBTSocial.png) no-repeat -74px 0 transparent;}
.sidebar .social_media .gplus_icon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEVSegwZtQYGWVRAxte4r_NpJrTvbF6xQhZHnYGNomgVQWVqHEqpglsJxU0KikwXSVjCkW07J6A3ndjbvYIKDo9xrqGQcyEw26H7HLis2cOu6te3Bt64ybrfFW9Y21ZS_79BNxTYhTyE3/s1600/BBTSocial.png) no-repeat -147px 0 transparent;}
.sidebar .social_media .rss_icon {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEVSegwZtQYGWVRAxte4r_NpJrTvbF6xQhZHnYGNomgVQWVqHEqpglsJxU0KikwXSVjCkW07J6A3ndjbvYIKDo9xrqGQcyEw26H7HLis2cOu6te3Bt64ybrfFW9Y21ZS_79BNxTYhTyE3/s1600/BBTSocial.png) no-repeat -221px 0 transparent;}
.sidebar .social_media .twitter_icon:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEVSegwZtQYGWVRAxte4r_NpJrTvbF6xQhZHnYGNomgVQWVqHEqpglsJxU0KikwXSVjCkW07J6A3ndjbvYIKDo9xrqGQcyEw26H7HLis2cOu6te3Bt64ybrfFW9Y21ZS_79BNxTYhTyE3/s1600/BBTSocial.png) no-repeat 0 -70px transparent;}
.sidebar .social_media .facebook_icon:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEVSegwZtQYGWVRAxte4r_NpJrTvbF6xQhZHnYGNomgVQWVqHEqpglsJxU0KikwXSVjCkW07J6A3ndjbvYIKDo9xrqGQcyEw26H7HLis2cOu6te3Bt64ybrfFW9Y21ZS_79BNxTYhTyE3/s1600/BBTSocial.png) no-repeat -74px -70px transparent;}
.sidebar .social_media .gplus_icon:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEVSegwZtQYGWVRAxte4r_NpJrTvbF6xQhZHnYGNomgVQWVqHEqpglsJxU0KikwXSVjCkW07J6A3ndjbvYIKDo9xrqGQcyEw26H7HLis2cOu6te3Bt64ybrfFW9Y21ZS_79BNxTYhTyE3/s1600/BBTSocial.png) no-repeat -147px -70px transparent;}
.sidebar .social_media .rss_icon:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEVSegwZtQYGWVRAxte4r_NpJrTvbF6xQhZHnYGNomgVQWVqHEqpglsJxU0KikwXSVjCkW07J6A3ndjbvYIKDo9xrqGQcyEw26H7HLis2cOu6te3Bt64ybrfFW9Y21ZS_79BNxTYhTyE3/s1600/BBTSocial.png) no-repeat -221px -70px transparent;}

</style>
<div class="widget social_media">
     
       <ul>
                <li><a class="social_media_icon twitter_icon" href="YOUR TWITTER URL HERE"></a>  </li>
                          <li> <a class="social_media_icon facebook_icon" href="YOUR FACEBOOK URL HERE"></a> </li>
                          <li>  <a class="social_media_icon gplus_icon" href="YOUR GOOGLE PLUS URL HERE"></a> </li>
                          <li> <a class="social_media_icon rss_icon" href="http://feeds.feedburner.com/YOUR FEED ID HERE"></a>  </li>
          </ul>
   </div>

Replace  YOUR TWITTER URL HERE with your Twitter ID URL

Replace  YOUR FACEBOOK URL HERE with your Facebook Page URL

Replace  YOUR GOOGLE PLUS URL HERE with your Google Plus Profile URL

Replace  YOUR FEED ID HERE with your FeedBurner ID

3) Save your Layout
4) Done! 

Like us on Facebook and Follow us on Twitter , If you have any question regarding this widget you can ask in comments below