Add Link Nudging Effect to Links and Images in Blogger

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.

DEMO::
 

Demo 1 

Demo 2

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;
} 

Custamizations

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

 Adding Nudging Effect to custom link

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>