Heading Tag With Drop Shadow and Mouse Hover Effect

}

.post h3:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

 

Note:- Delete any code inside your template that may look like .post h3

Make these changes:

• To Change font type edit verdana and replace it with any font family you like.
• To change font style replace italic with either normal or bold
• To change text color and left/right border colors in active mode then change #666 and replace it with a color of your choice
• To replace text and border colors on mouse hover then change #FF133F
• To change box shadow color in active mode change #666
• To change box shadow color on mouse hover mode change #FF133F

     5.    Save your template and you are almost done!

How to use Heading Tags inside Posts?

1. Create a new post as you normally do
2. Now use the following code wherever you want to add a headline

<h3>Write Headline Text here</h3>

     3.  When you publish the post, you will find the magic working just perfectly. Enjoy!

I hope this little trick helps you in better writing quality posts. More variation will be introduced soon. Do let me know if you needed any help.

Please change your post title tags to h2 from h3 for better SEO and traffic value. Read this post:

• [a href="http://www.mybloggertricks.com/2011/06/optimize-blog-post-titles-using-h2-tag.html" target="_blank"]Change Blogger Post titles to H2[/a]

Source: http://www.mybloggertricks.com/2011/10/heading-tag-with-drop-shadow-and-mouse.html