How to add awesome hover effects to blogger post titles

In our previous post, you have learned how to add dotted horizontal lines above and below the blogger post title area. You have also done some customization in it to fit your preference. Hope you found that tutorial easy and helpful. And now let us take that tutorial little farther and try adding some hover effects on that customized area.
     

The hover effects will appear whenever a reader take computer cursor on that area. It will make your blog post title stylish. To add it, consider the following steps:

Login to you blog>Click on Template>Click on Edit HTML>Find (Ctrl+F): ]]></b:skin>. And just above it, paste the given HTMLs: 

.post h2:hover{
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
background-color: #B7B9B7;
color:#666;
padding-top:2px;
padding-bottom:2px;
}

In above code B7B9B7 is a background color of that customized post title area. You can change it according to your preference.  Once having changed the color code, click on Save Template. You can view the blog and take cursor on any of post title. Hope it appeared in your blog. Enjoy Blogging. Cheers!