A Complete Sharing Widget With jQuery Effect

Previously, I had shared A Complete Sharing Widget for blogger. Widget perform very good on every type of blogger template and we also get positive response from our readers. But most of the readers constantly requesting to make this widget more attractive. So that we are here to increase the beauty of this widget by adding two gorgeous effect of animation and opacity. Both of these effect uses jQuery, which will execute on mouse hovering.

Demo

How To Add Attractive Sharing Widget To Blogger:-

Before proceeding to the tutorial, you should add the basic widget code to your blog from this tutorial.  

How To Add Special Effect To Sharing Widget:-

If you want to add animated effect in your share widget then following change should be done in your blog template. Find the following code in blogger template.

</head>

Paste the following code just above it to make your sharing widget animated.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<!-- internetricks4u.blogspot.in-->
<script type="text/javascript">
$(document).ready(function(){

  $("#myshare tr td").hover(function(){

    $(this).find("img").animate({left:10},50);

    $(this).find("img").animate({left:-10},50);

    $(this).find("img").animate({left:0},50);

  });

});
</script>
<!-- internetricks4u.blogspot.in-->

To add opacity effect to sharing widget then add following code just above the </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<!-- internetricks4u.blogspot.in-->
<script type="text/javascript">
    $(document).ready(function() {
        $('#myshare tr td img').each(function() {
            $(this).hover(function() {
                $(this).stop().animate({ opacity: 0.3 }, 350);
            },
           function() {
               $(this).stop().animate({ opacity: 1.0 }, 350);
           });
        });
    });
  
</script>
<!-- internetricks4u.blogspot.in-->

More Article From The Same Author

• Change Opacity Of An Element Using jQuery 
• Add Cool Reaction To Blogger Blog