Heading Tag With Drop Shadow and Mouse Hover Effect


HEADING TAGS

Blogger blogs has the free option of editing the style sheet. Fortunately you can play around the codes to give your blog any look you want. Last year I shared various ways of customizing the heading tags i.e. H3. We use H3 tags inside posts to write headlines and important sections of the posts. Today we would learn how to create a custom headline that will change colour on mouse hover. We will use CSS3 effects to produce a drop shadow effect along with mouse hover effect. This will give your headlines a neon look. So lets do it!

 

Create Post Heading Tags In Blogger

  1. Go To Blogger > Design > Edit HTML
  2. Backup your Template
  3. Search for this,

]]></b:skin>

    4.    Just above it paste the following code,

/*----MBT Heading Tag----*/


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

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


}

.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:

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

15 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Coool ..... Another great widget .....

    ReplyDelete
  2. Amazed...

    Shocking...

    Cooooooooool...

    Thank to mustafa!

    By
    H@r!

    ReplyDelete
  3. Awesome ..........

    Thanks Mustafa..........

    Check it on my website; http://www.accountancystudents.net/

    ReplyDelete
  4. Good post! Please dont forget to write about how to customize homepage and the way posts are displayed. Hope to hear from you soon buddy! :)

    ReplyDelete
  5. very very nice article

    it is very helpful for me

    http://internetricks4u.blogspot.com/

    ReplyDelete
  6. Mediafire Link MKV Movies Download

    mediafire movies
    Free downloads
    Mkv movie


    go here...

    www.mediafirerockz.blogspot.com
    or
    www.mediafirerockz.co.cc


    for mediafire Hd movies,mediafire downloads,games,software

    ReplyDelete
  7. Wow So Cool Trick.

    Tell me how can I add h3 tag in all my published posts.

    From:http://www.onsecrethunt.com/

    ReplyDelete
  8. Am happy i stumbled on your blog, you are awesome. thanks

    ReplyDelete
  9. Cool Bro

    i make it in my blog
    http://zaid-info.blogspot.com/2011/10/donasi-untuk-zaid-info.html

    ReplyDelete
  10. goooooooooooood
    www.talatrizwan.blogspot.com

    ReplyDelete
  11. This is really an Awesome post by you in which you mention all the quality required steps..
    http://goo.gl/5LHLU

    ReplyDelete
  12. OUR Mumbai Escorts OFFER SERVICES TO REPUTABLE CLIENTELE FOR BUSINESS TRIPS, PLEASURE COMPANIONSHIP AND VACATIONING WHILE VISITING BANGALORE.


    Visit
    female Mumbai Escorts

    www.sanjanaverma.com

    ReplyDelete
  13. Ben 24 yaşında, 1.74 boyunda ve 51 kilodayım. çok genç ve baştan çıkarabilecek ve hayat dolusu tarzı yaşıyan bir batıkent escort bayanım.

    Sizlerle olan görüşmelerimi Batıkent’te kendime ait lüks ve konförlu dairemde gerçekleştiriyorum.

    Lütfen ciddi elit beyler arasın! gizli numaralara ve mesajlara kesinlikle cevap vermemekteyim.

    Lütfen ne beni nede kendinizi değerli vakitlerinizi zaman kaybınızı boşa harcamayın, Görüşmek dileğiyle.



    Gaziantep Escort
    Adana Escort
    Mersin Escort
    İzmit Escort
    kocaeli Escort
    Bodrum Escort

    Ankara Escort
    Ankara Escort
    Ankara Escort
    Ankara Escort
    Ankara Escort
    Ankara Escort
    Eskişehir Escort
    Eskişehir Escort
    Eskişehir Escort

    ReplyDelete