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.

Post a Comment

  1. while addind css of of all headings its not working but using only one itz working how to get all worked?
    i want css of heading used by you

    ReplyDelete
    Replies
    1. It should because all CSS sectors are different also use correct html code.If you are still getting the problems the pls. tell me in details.

      Delete
  2. Get information and advice about how to stay safe on social networking sites, create a safe profile, and keep your profile private and safe.

    ReplyDelete
  3. nice trick, but not working on my blog

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top