Floating Social Media Widget With Mouse Hover Effect

Hey Friends! Today I am going to share a Awesome Social Media widget for blogspot platform. In these days social popularity is very and most important thing for a blog because the social media popularity brings tons of traffic and page views to a blog. This widget has a set of five social media properties i.e. Facebook, Twitter, RSS, Google plus and Pinterest. This widget works on some very simple but effective CSS and java-script coding. The widget has sliding effect whenever a visitor will hover on a social profile, it will appear with a slide effect of that profile.

Live Demo:-

Live Demo

See the left side of this page for live demo ;)

Where This Widget Will Appear:-

Before, we get on to our Tutorial let us first learn where this widget will appear in a website. Since, this is a Sleek Widget. Therefore, it is extremely small in size so it wouldn’t take a large space on a website. We have integrated a Slide out Functionality that would produce sparks in the eyes of visitors. It will appear at the Top-left side of the screen.

How To add this widget to your blogger blog:-

The steps mentioned below are extremely simple. We have tried our best to minimize the steps.

So, let us start with our tutorial. Consider the following steps.

1. Go to Layout >> Add A Gadget, then choose HTML/JavaScript
2. Paste this code inside it.
   If your blog already have a jQuery Plugin then remove the highlighted code.
   (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)

   <style type="text/css">
   ul#social {
       position: fixed;
       margin: 0px;
       padding: 0px;
       top: 10px;
       left: 0px;
       list-style: none;
       z-index:9999;
   }
   ul#social li {
       width: 100px;
   }
   ul#social li a {
       display: block;
       margin-left: -2px;
       width: 100px;
       height: 70px;    
       background-color:#fff;
       background-repeat:no-repeat;
       background-position:center center;
       border:1px solid #AFAFAF;
       -moz-border-radius:0px 10px 10px 0px;
       -webkit-border-bottom-right-radius: 10px;
       -webkit-border-top-right-radius: 10px;
       -khtml-border-bottom-right-radius: 10px;
       -khtml-border-top-right-radius: 10px;
       -moz-box-shadow: 0px 4px 3px #000;
       -webkit-box-shadow: 0px 4px 3px #000;
   }
   ul#social .twitter a{
        background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_VCdxrNdIsFrp3yitBR31Ryc3F-Hh29DKew6P5JHd_Xe1KZCUbTQLYGEGiv3ownaJs3I3h-Hq-KBpPkPgH1PB08bi59GWWRrJwIJj5HFiHYzOYv2VRdy6P_LCTDXfHTYO_V6QEsOrwCs/s1600/Twitter.png)no-repeat;
   background-position:center center;
   }
   ul#social .googleplus a      {
       background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixmHgZ2_ciHwL7d-657USJ6__Yhrmmp1gynVTBqdx4gjN18hYEoTYvxTK9zjb52ChB-1sBOLDUGIyzQIzMDOAbITJA7BjOiygDUrWChJ4e5Eb3tUFTM85H3SVUAJVwolgc0zO2ktvT1CE/s1600/GOOGLE+PLus.png)no-repeat;
   background-position:center center;
   }
   ul#social .facebook a      {
       background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSDyV4_HCaSGPLcRMDd9JzwwncJuW5qnIxe99lqhbdH83ybOf5nS1-DRm4D7Wy57czwfHRN3_icQM8ApoxFxkdnKPFkcce8t2f8q3D6e60qIA7l7AEb19CUbuiuo5sw1PmLB18YziIWkY/s1600/Facebook.png)no-repeat;
   background-position:center center;
   }
   ul#social .rss a      {
       background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibb1Q7gC1bjt-HLBfBRUdgzWluBeOrMgc4BAjAvkK0GiacwC7mQ13ZXZBeJhQefPkS07KMtWXRWtaRV0Y04bcYzIKIQOKmoN4ZOoDLtnoctTBpvUFGf7UXtUVWJkLrxGnApRDQHut6D0M/s1600/rss.png)no-repeat;
   background-position:center center;
   }
   
   ul#social .pinterest a   {
       background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEEBYmhib5FTMl8MC1HuHScMt4E-37FYwcEIVAZbTfTBofYSY7pi2GAvmAuysh3-jobP2a1IqLW6tQACvOiHuTiU04aZMauEcKhhq0KIfB-yK0eR7AfhoGoWG3xdFTDQMBjda-WZ4kqEo/s1600/Pinterest.png)no-repeat;
   background-position:center center;
   }
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   <script type='text/javascript'>
   $(function () {
       $('#social a').stop().animate({
           'marginLeft': '-85px'
       }, 1000);
   
       $('#social > li').hover(
           function () {
               $('a', $(this)).stop().animate({
                   'marginLeft': '-2px'
               }, 200);
           },
           function () {
               $('a', $(this)).stop().animate({
                   'marginLeft': '-85px'
               }, 200);
           }
       );
   });
   </script>
   <ul id='social'>
    <li class='twitter'><a href='#' title='Twitter'></a></li>
    <li class='googleplus'><a href='#' title='Google Plus'></a></li>
    <li class='facebook'><a href='#' title='Facebook'></a></li>
    <li class='rss'><a href='#' title='Rss'></a></li>
    <li class='pinterest'><a href='#' title='Pinterest'></a></li>
   </ul>
   

• After Adding the above code Replace # with your Profile link
3. Now save the widget and See your blog. :D

If you Liked it! then Feel Free to Share this widget. Kindly let me know your views About this Widget in the comment box below.

About the Author

+Deep Sinha is a 17 year old young Blogger, currently living in West Bengal, India. He is Founder cum editor-in-chief of SkillBlogger He is not a professional. But Still he can play with Blogger Template Codes, Web Developing, Graphic Designing, Html, Css, Jquery,logo Designing and Blogger Widgets.