You are Here → Home » Blogger Jquery » Add jQuery Link Nudging On Links Hover For Blogger Blogs

Add jQuery Link Nudging On Links Hover For Blogger Blogs

by in Blogger Jquery, Blogger Tricks

Add Nice and smooth link nudging to Links on hover. This is great plugin and more attractive to your blog visitors. Here is I am giving two types. that is for custom links and for blogger labels plus custom links.

How to Add Link Nudging by jQuery?

  1. First Go to Blogger Dashboard > Design Tab > Edit HTML Tab
  2. Search for </head> tag
  3. Add following code just Before </head> tag 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    jQuery(document).ready(function($) {
        $('a.linknudge').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>
  4. Now Save Your template!

When You want to Add link Nudging to your links, Simply add a class “linknudge” to your links like this!

<a class='linknudge' href='/index.html'>Way2blogging</a>

The above code is For Custom links those are you animating by adding a class of ‘linknudge‘

Here is another code i am giving that is for your labels as well as for your custom links

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
        $('a.linknudge, .Label ul li a').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>

Enjoy!

Subscribe to our RSS  Feed or Follow me on Twitter for more Cool Posts !

Comments

  3. Harish says

    @ Beben Koben
    Ya! You are right!
    Firstly I decided to give this in both CSS & jQuery
    But is little bit Complicated to add in blogger template and using
    so I gave jQuery

    Thanks for Commenting here! Happy Blogging!

  5. Ashish says

    I had asked few doubts before also but i didn't get any ans. I am not expecting ans for this one also. But then also i am asking….

    when i use this feature in my template my slider image(in my home page) doesn't work. It works fine if i remove this code from my blog. Can you tell me what could be the problem?

    http://discoverdreamland.blogspot.com

  6. Harish says

    @Ashish
    Your answer for previous Question is added.

    You already have a Jquery plugin in your blog.
    and in this widget code i include a jquery plugin(in First line)
    so remove any one duplicate plugin
    it works good :)

  7. Ashish says

    You asked me to remove one JQuery plugin from the code. I removed from Link Nudging code. Then this time neither my slider image worked nor Link nudging.

    If i copy the whole code then my link nudging is working fine but slider image doesn't work.

    Now tell me what to do???
    Thanks
    http://discoverdreamland.blogspot.com

  8. Harish says

    @Ashish

    you have the duplicate plugins for menu and slider in your blog
    there are double plugins .
    so your menu and slider is not working, remove the duplicates.
    there is no problem with my side point of view .

  9. Ashish says

    As i said i had embedded only one JQuery in my blog. So there is no duplicate code. And what do you mean by duplicate plugin? I think a brief explanation with example will help to understand. By the way i had tried all possible ways to embed this code but in vain.
    Thanks
    http://discoverdreamland.blogspot.com

  13. Have A Nice Day Friend says

    As Ashish Said When I Add This Code To My Blog The Slider Doesnt Work, If I Add Removing Jquery Plugin Then Link Nudging Doesnt Work But Slider Works

  14. Pradeep says

    Hello, thank you for this tutorial.
    As this script allows to nudge labels I want to nudge my All sidebar links.
    Thank You

  16. says

    Very cool effect. Thanks! I just want to ask how can I apply this link nudging on “Recent Post” and “Blog Archive”? Can you help me out if it’s okay. :) I tried to find the code for the two gadgets so i can insert the code for link nudge but I can’t find them. Thanks in advance! :)

  20. says

    Very Very Nice Tutorial But How t can I do this link nudging on “Recent Posts” and “Blog Archive” ? OR Should I say On Almost All Links Of My Blog.

    Thanks