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

 blogger logo

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.



About the Author:
tilt  hover effect
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

GOLDEN WORKS TV

Related Posts Plugin for WordPress, Blogger...