Adding A Nudging Effect To Links And Images In Blogger

One way of  fully customizing the styles of putting links and images to blog posts is through adding a  nudging effect to it! In this tutorial  we are going to use  CSS3 to let our links and images swing from left to right and vice versa! Let's get work into it. Take a look at the live demo below first:
Check also: How to add different hover effects on images.

Adding Floating Sharing Buttons

Adding A Nudging Effect To  Links And Images In Blogger

Step 1. Go To Blogger >> Lay-out >> Edit HTML ( if necesssary backup your template)
Step 2. Search for ]]></b:skin>  and just above it paste the following code

/*--- BBT Link Nudging Effect ---*/
.bbt-nudge  {
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
-webkit-transition: all 0.8s ease-out;
-ms-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
.bbt-nudge:hover  {
margin-left: 30px;
padding-left: 10px;
}

Note: Edit the bolded values to increase or decrease the swinging duration.
Step 5. Save your template and done!

Whenever you want to implement this styles, simply add the following code in Edit HTML mode of your Post Editor Page.

For Nudging Link, use the code below:

<a class="bbt-nudge" href="The URL Of Your Post  Here">Your Text Link Here</a>

Example:
<a class="bbt-nudge" href="http://bloggingtipsandtrix.blogspot.com/2013/03/this-is-one-of-few-social-sharing.html">Adding Floating Sharing Buttons</a>

And for  Nudging Image, use the code below:

<img alt="Your Image Description Here" border="0" class="bbt-nudge" height="200" src="The URL Of Your Image Here " width="200" />

Example:

<img alt=" blogger logo" border="0" class="bbt-nudge" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHHi2KMOvvGBUaAxryYp6P425_JJOOqygxe071EZoQ49BHY921PM0bmkUvBiMUgrr2XJnjP_J5KP4i26UTxGaMLqq0hGmcVlcou5Rq5ffkMa9N5LfjYrJKe6TXqxgkctZhAaR2wDc5tkw/s1600/blogger+logo.jpg " width="200" />

Note: You may change the borders of your image by replacing  the value red bolded texts.
Enjoy : -)
Credits goes to My bloggertricks with little modification from me.