Check also: How to add different hover effects on images.
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 ---*/Note: Edit the bolded values to increase or decrease the swinging duration.
.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;
}
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.
Enjoy : -)
Credits goes to My bloggertricks with little modification from me.
About the Author:
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
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