Products Search

Saturday, 21 December 2013

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='http://www.way2blogging.org'>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.6.4/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!

No comments:

Post a Comment

Samsung Galaxy M10s (Metallic Blue, 3GB RAM, Super AMOLED Display, 32GB Storage, 4000mAH Battery)

M.R.P.: ₹ 10,000.00 Deal of the Day: ₹ 7,999.00     FREE Delivery .  Details Ends in 07h 13m 46s You Save: ₹ 2,001.00 (20%) Inclu...