Add CSS3 Hover Animation Effect to Post Titles in Blogger

You might have seen hover effect on post titles on many blogs (especially in blogger blogs). Adding a CSS3 hover animation effect to post titles will increase your readership and it'll also attract your readers. One of our readers asked us that how to add a link nudge effect to post titles in blogger. So, today in this article we are going to learn how to add CSS3 hover animation effect to post titles in Blogger. How it works? Click on the demo button and move your mouse cursor over any post title to see how it works.

Demo

Add CSS3 Hover Animation Effect to Post Titles in Blogger

Step 1. Log in toy your Blogger Account
Step 2. Go to Template >> Edit HTML and search for the ]]></b:skin> tag
Step 3. Now copy the below code and paste it just above/before it

.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:#2aa4cf;
padding: 0px 00px 0px 10px;
-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;
}

Step 4. Click on Save Template button
And you're done!

From Editors Desk

We hope this article helped you in learning How to Add CSS3 Hover Animation Effect to Post Titles in Blogger. Share this article with your friends and don't forget to subscribe us!

Share This:

Tags:

Blog Design Blogging Tips CSS Tricks

• Prevoius
• Next