0 Beautiful Animated lables gadget Effect in Blogger

 Have seen lots of text hover, image hover effects animation till now, but never thought of trying something different animation in labels. 


So today i am showing you all the simplest and the effective way of adding animated labels to your blog / website. With my coding we can have fun cool effect add to our links in blog labels list. Have seen this kind trick many other sites but today after going through  spiceupurblog, found the best trick.


This effect is created with the use of jQuery and generally when ever any user visitor places their cursor over the animated label link it moves horizontally.


With just some small change in code this kind hover effect used in image, background or even underline also.

LIVE DEMO : TO SEE ITS OUTPUT WORKING EFFECT WATCH THE ABOVE VIDEO U GET CLEAR IDEA OF IT

Add Animated Link Lists To Your Blog

Step 1. In your Blogger dashboard click > Design > Edit Html

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code  


</head>

Step 3. Copy And Paste The Following Code Directly Above / Before  </head>



><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 450; 
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '20px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script><




Step 4. Save Your Template.