bump effect

Add An Animated Bump Effect To Labels List On Blogger

In this post we have a fun effect you can add to the links in your blog labels list.This trick has been around for a while and i have been using it on some other blogs.The effect is created using jQuery and basically when a visitor places their cursor over a link it moves across horizontally.So in the same manner you might have links change color, underline or change background on hover this will make them move.
Live Demo – You can see a demo in the category section in the sidebar of Design And Blog : Best Blogger Templates.

Video Tutorial Included – Fore More Help See The Video Tutorial At The End Of The Post.

Add Animated Link Lists To Your Blog

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

Design Edit Html Blogger

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 – More Info)

</head>

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

<!–Animated Label Links For Blogger http://www.spiceupyourblog.com–><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><!–End Animated Label Links For Blogger http://www.spiceupyourblog.com–>

Step 4. Save Your Template.

Video Tutorial For Animated Links In Labels Gadget

https://youtube.com/watch?v=FFVSa4HEW1k%3Frel%3D0

That’s it now the links in your Labels Gadget will have this cool effect.

Drop Your Comments And Questions Below.

Add An Animated Bump Effect To Labels List On Blogger
Informative
68
Useful
86
Easy To Read
73
Fact
84
Reader Rating0 Votes
0
78