Blog Tutorial - Add Nudging Effect To Links And Image

There are so many ways to make your blog looks great, by adding some widgets on it like an Image Map Header widget, for example. Or even by adoring it with something unique like a Clock, Breadcrumb, etc. On behalf of this, now i'd like to tell you one more kind of style that will probably make your blog looks great, Nudging Effect On Links and/or Images. Link Nudging is such an effect that which will make links or even images on your blog shaking/make a motion at a mouse hover, so maybe it's not too bad to adopt the effect. Follow the guidance below to add it to your blog.

1. Go to your Bloggerg.
2. Go to Dashoard.
3. Edit Html.
4. Tick The "Expand Widget Template".
5. Find this code on your template: ]]></b:skin> and add the following code 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:5px; padding-left:5px;}

You can change both values, "5px" for margin and "5px" for padding. Just set it to fit the place.

6. Save your template.
7. Now anytime you'd like to add nudging effect to a custom image or link (a single image or link), you can simply add a "class" function to that image or link and it will call the effect. Here is an example:

Add nudging effect to a single image: <img src="img url" class="link-nudge"/>

Add nudging effect to a single link: <a href="Link url" class="link-nudge">Your Anchor</a>

The above is adding nudging effect to a single image or link, now you'd like to add the effect to every links and labels on your blog, as such you need to add the following script to your template code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() {$(&amp;a.nudge, .#Label1 ul li a&amp;).hover(function() { //mouse in $(this).animate({marginLeft: &amp;5px&amp; }, 400);}, function() { //mouse out $(this).animate({marginLeft: 0 }, 400); }); }); </script>

The Script code above looks like the below.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {$(&amp;a.nudge, .#Label1 ul li a&amp;).hover(function() { //mouse in
$(this).animate({marginLeft: &amp;5px&amp; }, 400);}, function() { //mouse out
$(this).animate({marginLeft: 0 }, 400);
});
});
</script>

That's all guys.