14 Types To Customize / Change Heading Tags h1 h2 h3 h4 Styles in Blogger

It would be better to know how to customize headings tag in blogger. Despite of my experience in blogging let me share this article, so that some gets helped if they don’t know. And in this article I would be sharing customization of heading tag h1 , h2 , h3 and h4 tags. So you can make your blog some what more attractive and impressive when compared to before. Hope this would be surely helping you. Ok getting into the tutorial, I would be provided some codes with different styles of heading. Check it below. Customization of heading tags of the given code is given below. Remember google bolts like and love <h1> tags for better SEO so I recommend you to use h1 tags as your post title for better SEO.

change heading tags in bloggers

ALSO  READ :   HOW TO ADD AUDIO AND VIDEO PLAYER IN BLOGGER

 

    1. Login into blogger.com
    2. Select your blog if you have many
    3. Then migrate to Template –> Click on “EDIT HTML
    4. Then find for .post h4 if you want to change h4 tag
    5. Then copy the selected code and replace it
    6. Then click on save template .


WATCH DEMO VIDEO AT THE END OF THE POST IF YOU DON’T GET THE PROCESS EXACTLY

Heading Style 1 :

heading style h1 in blogger

.post h4 {
background-attachment: scroll;
background-color: white;
background-image: url(“http://2.bp.blogspot.com/-GZCR82-F-bU/UTnAhdjJ9eI/AAAAAAAAbXI/Fy0CjGpYCMM/s1600/h2.png”);
background-position: 4px 50%;
background-repeat: no-repeat no-repeat;
border: 3px solid;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px, 1px 1px 0 inset;
color: #333333;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: 1;
list-style: none outside none;
margin: 15px 3px;
outline: medium none;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0;
text-transform: uppercase;
vertical-align: baseline;
}

 

Heading Style 2 :

 

heading style h2 in blogger

 

.post h4 {
background-attachment: scroll;
background-color: white;
background-image: url(“http://4.bp.blogspot.com/-tFJEmtdTP9s/UTnAR0IbXxI/AAAAAAAAbXA/WO-NEvmKtXA/s1600/h2.png”);
background-position: 0 50%;
background-repeat: no-repeat no-repeat;
border: 3px solid #0D7005;
border-radius: 14px 14px 14px 14px;
box-shadow: 3px 3px 3px #ABABAB;
color: #25991C;
font-family: Lobster,cursive;
font-size: 26px;
font-weight: normal;
margin: 0 0 1em;
padding: 0 1px 4px 34px;
position: relative;
text-shadow: 1px 1px 0 #000000;
text-transform: capitalize;
}

 

Heading Style 3 :

 

Heading Tag By bloggerbulk.com

 

.post h4 {
border-bottom: 1px dotted #4E555A;
border-top: 1px dotted #4E555A;
color: #4E555A;
padding: 3px;}

 

Heading Style 4 :

customize_heading_style_in_blogger_2

 

.post h4{
background: url(“http://1.bp.blogspot.com/-zs4aWzVV5J4/UTm__Ri99eI/AAAAAAAAbW4/a–rNrWDM9Q/s1600/h2.png”) no-repeat scroll 4px center transparent;
border: 3px solid #C8C800;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
color: #A5A503;
font-family: ‘lobster’,sans-serif;
font-size: 19px;
font-weight: bold;
line-height: 1;
margin: 15px 3px;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
}

 

Heading Style 5 :

heading tag in blogger style 5

 

.post h4 {
background: url(“http://1.bp.blogspot.com/-wo4kiWscFy4/UTm_U5Uz8FI/AAAAAAAAbWo/vWgBX1TCQO0/s1600/star.png”) no-repeat scroll 5px center transparent;
clear: both;
color: #662D2D;
font-family: ‘Oswald’,sans-serif;
font-size: 26px;
font-weight: bold;
line-height: 1.2;
margin: 25px 5px;
padding: 6px 10px 2px 40px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase; }

 

Heading Style 6 :

 

Heading style 6, a very commonly used style in many blogs by bloggerbulk.com

 

.post h4{
color:#0080ff;
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
padding:3px;}

 

Heading Style 7 :

 

Heading style 7, CSS3 radius by bloggerbulk.com

 

.post h4{
text-align: center;font-weight:bold;border:solid 5px #999c3b;
font-size:14px;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;padding:3px}

 

Heading Style 8 :

 

Heading style 8, all round edge by bloggerbulk.com

 

.post h4{
text-align: center;font-weight:bold;border:solid 5px #0fc7ff;font-size:14px;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:75px;
-moz-border-radius-bottomright:75px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:75px;
-webkit-border-bottom-right-radius:75px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:75px;
border-bottom-right-radius:75px;}

 

Heading Style 9 :

 

Heading style 9, with weird shadow by bloggerbulk.com

 

.post h4{
line-height: 1em;
color: #91b9ff;
font-weight:bold;
font-size: 17px;
text-shadow:0px 0px 0 rgb(-365,-325,-255), 0px -1px 0 rgb(-620,-580,-510),0px -2px 1px rgba(0,0,0,1),0px -2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);
}

 

Heading Style 10 :

 

Heading style 10, with invisible shadow By bloggerbulk.com

 

.post h4{

font-size: 14px; font-weight: bold; text-shadow: 0px 0px 35px #000000;}

 

Heading Style 11 :

This heading tag in blogger is quite different which had on hover heading style for blogger. Hope would like it. There is a bit shade in the image below for better view of this watch the demo video at the end of the post. In order to use this there is some change in the process

NOTE : This can also be applied by the using the above mentioned same process or use below process watch video for better explanation if your choose this style.

  1. Login into blogger.com
  2. Select your blog if you have many
  3. Then migrate to Template –> Click on “EDIT HTML
  4. Then find for ]]></b:skin>
  5. Then copy the below code and paste above it / before it.
  6. Then click on save template .
heading tag by bloggerbulk

 

/*—-bloggerbulk.com 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;
}

 

Heading Style 12 :

heading style 12

.post h3 {
border-bottom: 1px solid #289728;
color:#0080ff;
font-size:12pt;
}
.post h3 span {
position: relative;
left: -0.3em;
bottom: -0.6em;
padding: 1px 0.5em;
margin: 0;
border: 1px solid #289728;
background-color: #fff;
}

 

Heading Style 13 :

This is also onhover style. Hope you can do your own customizing on this. The code is below.

Heading Tag with onhover effect for blogger

 

.post h4{
color:#0080ff;
border-top:1px dotted #289728;
border-bottom:1px dotted #289728;
font-size: 12pt;
}
.post h4:hover{
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
background-color: #289728;
color:#fff;
}

 

Heading Style 14 :

This is also a hover heading style followed by image. The sample looks like heading style 5 but onhover change the colour of the heading.

.post h4 {
background: #fff url(http://1.bp.blogspot.com/-zs4aWzVV5J4/UTm__Ri99eI/AAAAAAAAbW4/a–rNrWDM9Q/s1600/h2.png) top left repeat-y;
font-size: 12pt;
color: #0090ff;
padding:28px 0 0 44px ;
}
.post h4:hover {
color: #289728;
}

 

CUSTOMIZATION OF HEADING TAGS IN BLOGGER  :

The customization of the heading tags in blogger is quite simple. You might be having a doubt how to use this for the heading tag to H2 tag, the you need to change the h4 –> h2 in the code. And so on to convert into h1 change h4 –> h1. Hope you got it. I explained in video tutorial clearly. Have a look at it.

  1. Note in the above given codes you can edit them as you wish.
  2. If you want to change image then you need to change the code background #fff url {URL OF IMG} see the example code in style 14
  3. Changing font size edit font – size : 12px; ( your respective size for heading )

 

VIDEO TUTORIAL MUST WATCH FOR MORE INFORMATION :

HOPE YOU ENJOYED THE TUTORIAL

HELP US BY LIKING AND FOLLOWING US ON SOCIAL MEDIAUSE THE COMMENT BOX FOR ANY DOUBTS
ARTICLE APPLICABLE FOR :
  • How to change heading style in blogger
  • How to customize blogger heading style
  • How to edit headings in blogger
  • How to add onhover css heading style in blogger
  • How to customize headings in blogger with hover and border effects
  • How to change heading styles h1, h2, h3, h4 tags in blogger
  • How to change heading tags style in blogger

Article By Tharun

Hey! Tharun here. A Blogger makes blogging on wordpress tips, blogger tricks, SEO tricks, Android Apps, He love to share what he knows. Meet him at Facebook, Twitter. Get free Wordpress Installation Service Contact Here.

Comments

  1. Ganesh Sankar K K says

    Thanks a bunch bro! Indeed a very nice article that helped me beautify all my header tags. I had been searching the whole web for customizing blogger header but not found any article as good as yours 🙂 Simple yet understandable tutorial. Heading style 6 is superb and I used it in my blog 🙂 waiting for more awesome articles. Be in touch.

Leave a Reply to Abdul Hanan Cancel reply