How to Change/Customize Heading Style in Blogger

Some day ago, some of my readers had asked me to How To Customize or Change Heading Style in blogger blog. So today I’m here with some styles that you can use on your blogger blog and give pro look to your heading in blogger blog. Sub heading in posts are something that attract users to read your content carefully and can be customize it by CSS style sheet but how can you use it and where does style tag go? It goes to post area section of your blogger template. You can find it as .post h2, .post h3, .post h4,.post h5 etc, these are called sub headings.

As you know Blogspot uses a simple odd form headings by default, so when you put any H2 or H3 tag above the paragraph in your post then it shows your H2 and H3 tags in simple form as a result of view. So your article might be boring by this simple styling, but if you changed it into well looking form then it will be attractive than before. Readers find it more easy to locate a certain portion of your topic with the help of properly customized Headings. Further it will increase your search engine ranking because heading tags produces a really good impression on search engine robots. This tutorial is mainly for Blogspot users.
how to customize change heading style in blogger
Below we have discussed some Heading Styles. Now its your turn to select and use it on your blog. Lets follow our tutorial and learn how to customize heading style in blogger blog?

How To Customize Heading Style in Blogger?

Now to add one of the above Heading Style to your blogs, do the following,

1- Go To Blogger > Layout > Edit HTML
2- Search For ]]></b:skin>                  (Tip:- Press Ctrl + F )
3- Just above ]]></b:skin> paste one of the codes below,

Blogger Heading Style 1

Blogger Heading Style 1

.post h3 {  padding: 3px;  text-shadow: -2px -1px 1px #060606;  box-shadow: -3px 2px 3px #000;  padding-left: 10px;  margin-bottom: 7px;  background: #303030;  color: #F7F7F7;}.post h3:before {  font-family: FontAwesome;  position: relative;  content: ‘f054’;  font-size: 17px;  padding-right: 10px;}

Blogger Heading Style 2

Blogger Heading Style 2

.post h3 {
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;
}

Blogger Heading Style 3

Blogger Heading Style 3

.post h3 {
    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;
}

Blogger Heading Style 4

Blogger Heading Style 4

.post h3{
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;
}

Blogger Heading Style 5

Blogger Heading Style 5

.post h3 {
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;
}

Blogger Heading Style 6

Blogger Heading Style 6

.post h3 {font-size:120%; font-weight:bold;
padding-bottom: 5px; margin: 10px 0;
background: #E3F0F2 url(http://2.bp.blogspot.com/-rYrj9bjhWEU/VDGo7uyJlkI/AAAAAAAAACY/ZxjX8wlLhFI/s1600/note.png) center no-repeat;
border: 1px solid #6CC;
background-position: 7px 50%;
padding: 10px 10px 10px 50px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

Blogger Heading Style 7

Blogger Heading Style 7

.post h3 {
  border: 1px dashed #C7C7C7;
  padding: 3px;
  box-shadow: 2px 2px 5px;
  padding-left: 10px;
  margin-bottom: 7px;
  border-radius: 10px;
  border-bottom-color: #000;
  background: rgba(218, 218, 218, 0.04);
  border-bottom-right-radius: 100px;
}

Blogger Heading Style 8

Blogger Heading Style 8

.post h3 {
  background: transparent url(“http://2.bp.blogspot.com/-jNxuEWNpGTk/UV7-6ovsE3I/AAAAAAAABYs/tXcNlEqxCwM/s1600/h2.jpg”) repeat-x scroll 0px 0px;
  color: #FFF;
  font-size: 20px;
  font-weight: 200;
  letter-spacing: 0px;
  font-family: fantasy;
  margin-top: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 1px 6px 3px #000;
  padding: 10px 2px 10px 10px;
  text-shadow: 0px 1px #000;
  text-transform: uppercase;
}

Blogger Heading Style 9

Blogger Heading Style 9 CSS Hover Effect

.post h3{
color:#0080ff;
border-top:2px dotted #E60066;
border-bottom:2px dotted #E60066;
font-size: 20pt;
}
.post h4:hover{
border-top:2px dotted #E60066;
border-bottom:2px dotted #E60066;
background-color: #24006B;
color:#fff;
}

Blogger Heading Style 10

Blogger Heading Style 10

.post h3{
color:#47006B;
border:1px solid #FF0000;
font-size: 20pt;
padding:2px;
}

Conclusion:

So above guide is about How To Customize or Change Heading Style in Blogger With Our 10 Heading Styles. Hope by this guide you can easily add or change heading style on your blogger blog. If you are facing any problem while adding or changing Heading Style In Blogger with CSS then feel free to contact with me, you can find your answer by commenting on below comment section. Subscribe us for get updates direct to your mail box. Do Share.
Paramjot Singh
 

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)