Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

Floating Social Media Widget With Mouse Hover Effect

On // 31 comments
Advertisement
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

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.

31 comments:

  1. Buddie we didnt find any demo here :p

    http://bloggingbolt.blogspot.com/

    ReplyDelete
    Replies
    1. Hi buddy, Can't get you it's working fine, just click the live demo button.

      you can see the live demo on the left side of the page after clicking the live demo button. :)

      Still having the problem let me know..

      Thanks

      Delete
  2. Chan deep bro please tell me how you set this demo to be appear onclick?
    Have you added the entire code of this widget in this post? Please reply!
    I also want to add demo link in this format for future posts on my blog.

    ReplyDelete
    Replies
    1. Bro It's Just a JavaScript on-click function.

      yes, I added the entire code on this post. :)

      Delete
  3. Thanks All of you For your valuable comments. i will develop its v2 very soon.
    @MD ASAD REZA Plz Dont spam here.

    ReplyDelete
  4. nice widget chandeep. you share a template name minimu. i want to change theme social icon. i want to change pinstr icon. how?

    ReplyDelete
  5. Terrific idea! Clever. :)

    I need a little help with mine, if you don't mind? I just applied it at: http://www.ginabegin.com - you'll see there that they are stacked closely on top of each other instead of spaced out like on your demo; they are also sticking out quite a bit more. I tried playing with the margins in the CSS, but I'm no pro!

    Suggestions? Thank you!

    ReplyDelete
    Replies
    1. Add this code to your css

      ul#social li {
      padding:0px 5px;
      }

      Adjust by changing 5px !
      Regards ,
      Tanmay Kapse
      Your PC Genie

      Delete
  6. nice widget chandeep... Really nice

    ReplyDelete
  7. I wANT TO REMOVE THIS WIDGET, PLS TELL ME FAST HOW TO REMOVE IT, THIS WIDGET IS NOT DISPLAYING IN LAYOUT SO HOW TO REMOVE PLEASE COMMENT FAST I HATE THIS WIDGET

    ReplyDelete
    Replies
    1. To remove the widget you've to reverse the process, you followed to add the widget.

      BTW May I know why did you hate this widget.

      Delete
  8. its really awesome and unique one

    ReplyDelete
  9. Its Really Awesome widget . And Very Beautiful But Its Small . Thats the Only drawback .
    4 Requirements To Become A Good Successful Blogger

    ReplyDelete
  10. not working, it shows on top right in horizontal manner rather than vertical

    ReplyDelete
  11. Dear Chandeep,

    When I added extra link for feedback, it is overlapping with the other icon. Pls help me to remove the overlapping,

    Sopesh

    ReplyDelete
    Replies
    1. Hi Sopesh,

      kindly give me your blog url.

      Thanks :)

      Delete
  12. Thank you for this post. I like the buttons., good job and congrats

    ReplyDelete
  13. Hi, Chandeep I am having a problem that Floating Widget is little bit out on my blog compared to your demo. I want to put it inside can you help me please? you can check it out please please please please http://vishwainfo.blogspot.in/

    ReplyDelete
  14. I added this widget on my Blog. Really a nice widget for Blogger.
    Thanks.
    Blogger Maruf

    ReplyDelete
  15. Thank you so much. I wanted to put this on my blog's right side, may i knw how to do it? Thanksss.

    ReplyDelete
  16. A wonderful article
    Floating Social Media Widget With Mouse Hover Effect. When I worked as WEB freelancer at essay writing service I tried on my own almost everything from this information.

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. I have got "Anusha Riaz"'s same problem. when I click the icon of facebook but doesnt work. for example xxxxx.blogspot.com/www.facebook.com/xxxxx

    ReplyDelete
  19. Thank you man. Keep it up. :-)

    ReplyDelete
  20. Chandeep sir this is not working on blog sir.i have done exactly what describe above

    ReplyDelete
  21. is really very nice button i like so much

    ReplyDelete
  22. hey bro i tried using this on my website www.fishforthoughts.com
    The widget has come, but the link to facebook is not directing to facebook rather it is loading within the website like http://www.fishforthoughts.com/www.facebook.com/fishforthoughtsofficial and saying error 404.
    Can you give me some idea how to fix it?
    waiting for your reply

    ReplyDelete

I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.

Thanks,
Chandeep