CSS3 Hover Animation Effect for Your Blog Post Title


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


animation effect to blog post title
When I start writing about blogger tips and blogger widgets, many readers asked me how to give a link nudge effect or animations to blog post titles. You may get enough tutorials for link nudging effect in Google search but its totally different. Adding animation to blog post title will increase your blog readers as well as their impressions too. You can place this trick by using a simple CSS3.



live demo icon png Wanna see a live demo
Before we get into the trick, please take a click on the demo image shown below to get an idea of what we are going to make here. Place your mouse any post title after loading completely. Click on the below pic ▼to see the demo in action.

css3 animation effect

questionmark icon png How to add this animation to blog post title
As I mentioned above you can easily add this trick into your blogger blog by applaying simple CSS3 code into your template and you don't wanna add separate html code for this animation effect. Please follow the below steps.

  • Go to Blogger Dashboard > Template
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ▼

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

.post h2 {
margin:.1em 0 0;
padding:0 0 4px;
font-size:1.0em;
font-weight:normal;
line-height:2.5em;
color:#444;
font-family: Oswald, Serif;
}
.post h2 a, .post h2 a:visited, .post h2 strong {
display:block;
text-decoration:none;
color:#444;
font-size:2.0em;
font-weight:normal;
font-family: Oswald, Serif;
}
.post h2 strong, .post h2 a:hover {
color:#0274be;
background: url("http://iconkits.com/images/vip/aerozone_arrow_small_preview.png") no-repeat 4px center transparent;
padding: 3px 10px 3px 50px;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}

Click SAVE TEMPLATE and you're done!

pen icon png Please note the following thing
  • You can change the animation icon by changing the url of above highlighted line.

Now you are done! I hope this task seems to be very simple and easy to install. right? It works perfectly fine on other browsers (Mozilla, Chrome and Opera). Please do share this article if you like. We also expect your opinion via comments. Happy blogging:)