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
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
That’s it now the links in your Labels Gadget will have this cool effect.
Super.. i done it. 🙂
Will you say how to add ‘Top to Bottom’ button in blog?
By
Hari (http://hari11888.blogspot.com)
ReplyDelete
@ Hari – Do you mean the way the link to best blogger templates jump right to the category’s ?
ReplyDelete
Really cool effect i just used it on my blog, well explained.
ReplyDelete
hello paul. can u do the tutorial bout new funtion for “share this”? like the top of ur blog post.. with a different design of “share this”? thanks 🙂
ReplyDelete
@ Haz Issac – I am currently working on a number of scripts from Add This, exactly what is the new funtion from share this ? What effect are you looking for ?
ReplyDelete
Amazing … thank you for sharing Paul.
ReplyDelete
@Admin: No. I like to add the button ‘back to top’button for ‘Top to bottom’.
In previous post comments, admin reply in shine is very cool. How did you add this? i am using disqus. Is possible to add?
Regards
Hari (http://hari11888.blogspot.com)
ReplyDelete
everything works through the good work
thank you
ReplyDelete
Great im glad you had no problems TDJ 🙂
ReplyDelete
This is cool. this can be a good substitute to the Tag Cloud (Blogumus) by Amanda
ReplyDelete
Paul,
I added it and it worked beautifully but it totally screwed around with my featured post slider, but when I took the code back out it went back to normal, can you help me fix this?
I really like this effect and would like to use it.
– Tee
ReplyDelete
@Tamara Spicer : This is because Featured Post Slider is based on jquery and even this animated effect is based on jquery and you can add only one jquery application/script in a webpage.
Even I have a Featured Post Slider and it was screwed when I added jquery Social Bookmarking Icons from Spiceupyourblog.com. I almost banged my head when my post slider wasn’t working and then I searched and found out about this.
ReplyDelete
@ Saif – That is not true you can add more that one jQuery effect in your blog, it is recommended you only add the jQuery script once but you can call on the jQuery as many times as you like.On the template site the demo leads to the Popular Posts and Labels both have jQuery effects.
ReplyDelete
@Admin – So then once I place jQuery script on my blog then all I have to do is add the html code of the particular effect I want? Or how does that work? e.g If I add the jQuery script for one of your post slider effects then when I place the social Bookmarking Icons from here, do I skip the jQuery and just add the html code?
ReplyDelete
@ Tamara – This is not something we need to get into, i was just making the point.I was referring to the main jQuery script however there may be other scripts that need to be added.It would be great if we just added a script and everything worked as we liked 😀 Every tutorial on this blog is tested…tested again …tested again, just follow the steps exactly and everything will work.
ReplyDelete
thank you
ReplyDelete
excellent…simply superb effect. you are a magician for blogger audience
ReplyDelete
Really really awesome effect..thanks a loads for this video tutorial..
ReplyDelete
I Want To Add This Effect To My Random Posts Widget. How Can I Do This?
Please Help..
My Blog Is,
http://www.cityofsms.blogspot.com
ReplyDelete
nice man i loved it so much and i apply it on my blog
http://earnwithptc2011.blogspot.com/
ReplyDelete
thank you
ReplyDelete
Hello Paul,
Thank you for this tutorial. It worked, but it is only for Labels. right?
I want the other working animated like Blog Archive, Popular Posts, Blog List.
Please HELP me to do this Blog Archive, Popular Posts, Blog List will be animated.
Thank you.
-jayryan09-
ReplyDelete
Hay Buddy thanks for this nice tutorial now my blog is looking professional and awesome… by Shan King Khan
ReplyDelete
Thank you for this excellent post full of ideas.It is helpful & your post motivated me..thank
ReplyDelete