jQuery Link Nudging effect plugin can create your links and images moving from left to right when you mouse over on them. This great plugin can give more professional and attractive looks to your links and images as well as your blog readers. This plugin is based on jQuery library and uses latest CSS3 code. Please see screenshot and demo attached below before adding this plugin to your website or blog.

jQuery Link Nudging Preview

jQuery Link Nudging Demo

Live Demo

jQuery Link Nudging Code for Websites

1. Here is the jQuery script code.

<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.rslinknudge').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>

2. CSS3 code for the plugin.

.rslinknudge {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}

.rslinknudge:hover {
margin-left: 12px;
}

jQuery Link Nudging For Blogger Blogs

1. Go to your Blogger Dashboard click on ---> Design tab ---> Edit HTML tab.

2. Make sure to take backup of your Template before making any changes to your HTML. (More Info On: How To Backup Blogger Template.

3. Now click on Expand Template Widgets check box.

4. Search for below code in your Template. More Info On: "How To Find A Code In Blogger Template".

]]></b:skin>

5. Copy and Paste the following CSS code BEFORE it.

.rslinknudge {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
.rslinknudge:hover {
margin-left: 12px;
}
.rslinknudge,Label li,#Label1 ul li a,.Label li a {
-moz-transition: all 0.2s ease-in 0s ;
-webkit-transition: all 0.2s ease-in 0s ;
-o-transition: all 0.2s ease-in 0s ;
}

.rslinknudge:hover,Label li:hover,#Label1 ul li a:hover,.Label li a:hover {
margin-left: 14px;
}

6. Next again search for below code in your template.

</head>

7. Copy and Paste the following JS code BEFORE it. (If you already using jQuery script then ignore red line of code.)

<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.rslinknudge, .Label ul li a').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>

8. Save your template.

How To Use jQuery Link Nudging

1. If you want to Add Link Nudging to your links, Simply add a class “rslinknudge” to your links like this.

<a class="rslinknudge" href="http://ravisaive.in">Technology Blog</a>

2. If you want to Add Image Nudging to your links, Simply add a class “rslinknudge” to your links like this.

<a class="rslinknudge" href="http://ravisaive.in"><img class="rslinknudge" src="https://lh6.googleusercontent.com/-Mqy97ANBWO8/TzfuoY39zdI/AAAAAAAAVTU/O1xc9sA_AEo/s80/Jessica-Alba-Google-Chrome-theme.jpg"/></a>

List Of jQuery Link Nudging Code

1. Go to your Design tab ---> Page Elements tab.

2. Click on "Add a Widget" then select "HTML/Javascript" Widget.

3. Copy and Paste the following code inside the widget.

<ul>
<li><a class="rslinknudge" href="YOUR-LINK">YOUR-TEXT</a></li>
<li><a class="rslinknudge" href="YOUR-LINK">YOUR-TEXT</a></li>
<li><a class="rslinknudge" href="YOUR-LINK">YOUR-TEXT</a></li>
<li><a class="rslinknudge" href="YOUR-LINK">YOUR-TEXT</a></li>
<li><a class="rslinknudge" href="YOUR-LINK">YOUR-TEXT</a></li>
</u

4. Replace YOUR-LINK with your own links and YOUR-TEXT with your own text.

5. Save your widget.