A Complete Sharing Widget With jQuery Effect

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-->

Categories: Tips , Tutorial