CSS3 Hover Animation Effect for Your Blog Post Title

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.

 

1. Go to Blogger Dashboard > Template
2. Backup your Template before making any changes to your blog
3. Click on Edit HTML
4. Tick Expand Widget Templates
5. 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;
}