January 6, 2010

Dancing Links - That's Jquery Link Nudging


If you are a regular reader of BloggerStop, then you might have noticed some of the links in the sidebar (bottom) start dancing as soon as you hover your mouse cursor on them. This is done using Jquery - Link Nudging.

Here's the live demo (hover your mouse cursor on these links):
BloggerStop.Net



Nudging in Images:
Dancing Blogger Icon Dancing Delicious Icon Dancing Digg Icon Dancing Digg Icon

Instructions to add similar dancing links to your blog:
STEP #1
Log in to Blogger and go to Layout -> Edit HTML
and find (CTRL+F) this code in the template:
</head>
STEP #2
Now immediately ABOVE/BEFORE it, paste this code:
<!--DANCING-NUDGE-LINKS-STARTS-->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
<!--DANCING-NUDGE-LINKS-STOPS-http://bloggerstop.net-->
And save the template.

Now whenever you want to add this dancing effect to any of your links/images (either in widgets/posts), add this code (class="nudge") to the HTML "a" tag, like this:
<a href="http://bloggerstop.net" class="nudge">Link-Text</a>
and to use images instead of text, use this code:
<a href="http://bloggerstop.net" class="nudge"><img src="http://i41.tinypic.com/5wf6h5.jpg"/></a>

That's it. Let your images dance for your readers!

Related Products (From Amazon):


16 comments:

Beben said...

i have to do it :D
thanks brooo :)

कांचन कराई said...

Ooooh! Waited for this post since long time. :-*

I have one more question - Can you tell, how may I have multi headers in my blog i.e. one header for one label. Like if my blog reader clicks on 'Travel' Labe,l I should be able to show ONLY travel related header and if someone clicks on 'Health' Label, my blog header should be changed as ONLY health related header. (Not two or three headers one upon one). Want to surprise my readers. :-o Thank you.

P.S. Last comment deleted coz question was not formed properly. :-t

Divya Sai said...

Well yes you can do that, follow this method:
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html
and select the option to restrict a widget (header in your case), in a SPECIFIC URL/ARTICLE/POST-PAGE, where this specific url/post-page is the url of the label, like this in my blog (http://bloggerstop.net/search/label/Blogger%20Help)

कांचन कराई said...

Ah, great! I will experiment it on my blog and reply. Thanks a lot for sucha a quick reply.

Admin said...

Great post!
But I have problem when I follow your instruction.
After I paste the code there is appear:
XML error message: The string "--" is not permitted within comments.
What should I do?

Thanks in advance.
Ramli

Divya Sai said...

@कांचन कराई
You are welcome, I hope it will serve your purpose, in case there's still some problem then feel free to comment anywhere in this blog.

@Admin
Oops sorry, there was a missing hiphen (-) in the code, I have corrected the post, try it now it won't give any error now. Thanks for mentioning that.

Anup said...

Hmmm coool i am trting to know more javascript!

Reza@Blogging Guide said...

Cool! I will try it on my blog as soon as possible? But one question, can the script hosted in my own host?

Divya Sai said...

Yes you can do that Reza...

Angelina said...

Thanks, I used this in my blog too :)

Abhishek said...

i have tried a lot but its not working ....

Please see my blogs....
for fun and career

GÖK-TÜRK said...

İt s great but it s not work in my template...What can I do ? :(

Sasha Vong said...
This comment has been removed by the author.
Zeegi said...

Ok this is creepy, but hey I might use this for the BlogRoll purpose.. This is the first I've seen..
Thanx and check this out http://zeegi-comix.blogspot.com/

mba in bangalore said...

nice tutorial

Music said...

Perfect just what I was searching for!

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

Allowed HTML tags: <b>, <i> and <a>

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy