Free Floating Social Media Widget With Mouse Hover Effect for your blog


See To Left side And Watch Demo

Where I can add this code?

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.
And if you don't want to add it to on whole pages then you can also add it into your own pages.

How I can add this code?

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.

  • Go to Layout  then Add A Gadget and then choose HTML/JavaScript 
  • Paste this code inside it.


  • If your blog already have a jQuery Plugin then remove the following green code.
  • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  1. <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://3.bp.blogspot.com/-Lgs-m9jcrOM/V1tdeX2ftbI/AAAAAAAAAJQ/TO73dttwuC4zE6fHBN-Y876OIrrdUo0EgCLcB/s200/twitter.png)no-repeat;background-position:center center;}ul#social .googleplus a { background:#D73D27 url(https://1.bp.blogspot.com/-p0yExcYstRs/V1taS5dIS1I/AAAAAAAAAI4/ys365TjDKNU810flm9QsT36xc9tF-xzmgCLcB/s200/googleplus.png)no-repeat;background-position:center center;}ul#social .facebook a { background:#1A4B97 url(http://1.bp.blogspot.com/-3M1F3Y29Yoc/UPFOeAAUFvI/AAAAAAAAA4c/ALvfOPDwJ-g/s1600/Facebook.png)no-repeat;background-position:center center;}ul#social .rss a { background:#FAAE17 url(http://4.bp.blogspot.com/-twR0g7wotpE/UPFOfFtFOuI/AAAAAAAAA4o/uJMUf9hjRco/s1600/rss.png)no-repeat;background-position:center center;} ul#social .pinterest a { background:#963336 url(http://2.bp.blogspot.com/-xgOrG4ysqyM/UPFOeKFKMtI/AAAAAAAAA4Y/i_jnKpHsK24/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><br /><ul id="social"><li class="twitter"><a href="#" title="Twitter"></a></li> <li class="googleplus"><a href="<li class="googleplus"><a href="#" title="Google Plus"></a></li> <li class="facebook"><a href="<li class="facebook"><a href="#" title="Facebook"></a></li> <li class="rss"><a href="<li class="rss"><a href="#" title="Rss"></a></li> <li class="pinterest"><a href="<li class="pinterest"><a href="#" title="Pinterest"></a></li> </ul> </ul>
    • After Adding the above code Replace # with your Profile link
  2. Now save the widget and See your blog
If you Liked it! then Feel Free to Share this widget. 
IF You like this article please comment.

Subscribe To Get FREE Tutorials!

    Blogger Comment
    Facebook Comment

2 comments: