Set Of Heading Tags With Hover Effect For Your Blog

There are a lot of good reasons to use heading tags to define your HTML documents and provide structure. But many Web designers have gotten in the habit of not using heading tags, or using only one or two in a document, and using images, font tags, and styled text instead. But using heading tags can help you with SEO, with accessibility, and with the general structure of your page.Headings Tags makes your post more suitable by which your readers can read your content properly.I have made these heading tags are with pure CSS.Now lets see how to add them on your blog.

Add Heading Tags To Blogger

1. Choose any heading tag below.
2. Copy the code of respective heading tag.
3. Now go to Blogger Dashboard > Design > Edit HTML.
4. Find ]]></b:skin>
5. Add code before ]]></b:skin>.

Heading 1

Preview

Lorem Ipsum Dolor Sit Amet

.hb1{
color: #6600FF;
font-size: 20px;
background: #BCF5A9;
margin: 0px 0px 5px;
padding: 3px 0 6px 10px;
border-left:4px solid #FF0000;
} 
.hb1:hover {
background:#f2f2f2;
)

---

Heading 2

Preview

Lorem Ipsum Dolor Sit Amet

.hb2{
color: #000;
font-size: 20px;
font-family:Verdana;
background: #fff;
margin: 0px 0px 5px;
padding: 3px 0 3px 10px;
border-left:4px solid #FF0000;
} 
.hb2:hover {
background:#F6CECE;
}

---

Heading 3

Preview

Lorem Ipsum Dolor Sit Amet

.hb3{
background:#FFFFFF;
font-weight: bold;
font-family:consolas;
font-size:19px;
color:#FA5858;
text:1px 1px 1px #AAA;
border-bottom:4px solid #Ff0000;
-moz-border-radius:0 0 6px 6px;
-webkit-border-radius:0 0 6px 6px;
border-radius:0 0 6px 6px;
-moz-box-shadow:1px 1px 22px #AAA;
-webkit-box-shadow:1px 1px 2px #AAA;
box-shadow:1px 1px 24px #AAA;
text-transform:capitalize;
display:block;
width:96%;line-height:1;
margin:6px 3px;
padding:4px 10px}
.hb3:hover {
background:#E0E0F8;
}

---

Heading 4

Preview

Lorem Ipsum Dolor Sit Amet

.hb4{
font-size:20px;
padding:5px;
font-family:consolas;
color:#0000FF;
text:1px 1px 1px #333;
background:#CEF6CE;
border-left:20px solid #FF0040;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 2px #ccc;
-webkit-box-shadow: 1px 1px 2px #ccc;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height:1;
}

---

Heading 5

Preview

Lorem Ipsum Dolor Sit Amet

.hb5 {
font-size:20px;
font-family:verdana;
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;
}
.hb5: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;
}

---

Heading 6

Preview

Lorem Ipsum Dolor Sit Amet

.hb6{
color:#444;
font-size:15px;
font-weight:bold;
font-style:italic;
font-family:georgia;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
background:#E0F2F7;
}
.hb6:hover{
background:#ffffff;
}

---

How To Use Them In Blogger Posts?

1. Go to your Post Editor.
2. Change tab to Edit HTML.
3. Paste below code

<div class="YOUR HEADLINE CLASS i.e hb1">Write Headline Text Here</div>

For An Example -
If you use this code -

<div class="hb6">Write Headline Text Here</div>

then result will be -

Write Headline Text Here

I hope,these titles will surely help you to write quality posts for your readers. Do let me know if you needed any kind help.