CSS3 Hover Animation Effect for Your Blog Post Title

Yes, Today Your Blog is Going to Look More Digital and Stylish by Adding Animated Hover Effect on your Blog Post title.And Don't have to Do any Hard work but just copy and Paste once and you are done.

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.

Live Demo!

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!

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.