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


0 comment:

Post a Comment