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:

Related Posts:

  • Glossy Red-Grey Tabs MenuThis new menu has two different variations. The color combination can either be red in active mode and grey on mouse hover or vice versa. It is a shiny navigation menu that is mainly created for including blogger pages such a… Read More
  • Fluid Text Resizer: Adjust Font Size in Blog PostsI came across an excellent jQuery based text resizer script that lets your visitors to adjust, change, resize font size of your blog post. This decreases or increases the font size providing your readers with better readabili… Read More
  • Heading Tag With Drop Shadow and Mouse Hover Effect 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… Read More
  • Use Adobe PhotoShop Online!Ever wanted an online Photo Editor with complete Image Editing options just like Adobe Photoshop CS5? Fortunately I just came across a great online image editing tool by the name Pixlr . It includes all options that photoshop… Read More
  • How To Restore a Deleted Blog in Blogger?Sometimes we take decisions without giving a second thought and this leads us to trouble and we regret on what we did and wish to undo what you did in hurry. Blogger provides all users to import, export or to permanently dele… Read More