Add heading tag with drop shadow and mouse hover effect

Blogger  is one of the place one can play with JavaScript code because it is more interesting to creating anything their. In this topic i am going to discuss how to adding heading tag with drop shadow and mouse hover effect. The blogger is not give you this type of but blogger is only give only simple hove effect in blogger post titles. MBC design this code with CSS3 effect in very cool design one can simply use the code. Now start learn how to get the drop shadow and mouse hover effect in your blog title.

Adding drop shadow and mouse hover effect in Blogger post title

Go To Blogger > Design > Edit HTML

Backup your template

Search this using Ctrl + F

]]></b:skin>

Just above it paste the following code

        /*----MBC Heading Tag----*/

    h3{
    font-family:Arial !important;
    font-style:italic !important;

    }
    .post h3 {
    color:#0000ff;
    border-left:10px solid #0000ff;
    border-right:10px solid #0000ff;
    padding:3px 5px 3px  20px;
    border-radius:15px;
    -moz-border-radius:15px;
    box-shadow:0px 0px 13px #0000ff;
    -webkit-box-shadow:0px 0px 13px #0000ff;
    -moz-box-shadow:0px 0px 13px #0000ff;

    }

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

If you are using h2 tag in your post tile then change h3-h2, .post h3-.post h2 and .post h3:hover-.post h2:hover.

Now save your template.

Visit your blog and enjoy with new look!!.