Add Link Nudging Effect To Links And Images In Blogger

In my previous tutorials, i have given many widgets and tips for attracting visitors of your blog. Whereas, the 4 in 1 social slider widget succeeded in reaching maximum visitors. I am on the same concept of attracting visitors to blog. The link nudging effect have attracted huge number of bloggers and visitors in a short span. So i am writing this post to help you in implementing a link nudging effect for links and images on your blog to attract the visitors of your blog. Now lets come to the tutorial and i hope you already know what is link nudging effect!!. If not, please have a look over the demo shown below.

Tutorial On How To Add Link Nudging Effect To Links And Images in Blogger::

1. Go to your Blogger Dashoard --> Template --> Edit Html (Tick The Expand Widget Template).

2. Find ( Ctrl+F) For ]]></b:skin> and add the following peace of code just above it.

 .link-nudge  {
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.link-nudge:hover  {
margin-left: 25px;
padding-left: 5px;
} 

• Hint::
• Change the values 25px and 5px to change the left margin of links when mouse is hovered on it.

Adding Nudging Effect::

3. To add nudging effect to a custom link, use class as Link-nudge as shown below.

<a href="Link url" class="link-nudge">Link 1</a> 

4. To add  nudging effect to a custom image, use img class as link-nudge as shown below.

<img src="img url" alt="img description" class="link-nudge"/>

To make all label links and custom links to have link nudging effect automatically, Add the following jquery code just above the ]]></b:skin>

<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