Guide Customize Heading Styles in Blogger

Every blogger wants to design a easy to navigate and good looking blog design. He write posts in such a way that give good impression on readers. You must have observed the different style headings on different blogs. Creating stylish and good looking headings attract you readers and make your blog posts easy to understand and beautiful. Headings also contributes towards your blog Search Engine Rankings. In Blogger post editor, you must have noticed Heading, Subheading and Minor Heading. In this post, we will learn how to customize these heading styles.

• First Point To Be Noted 
• When we are using HTML editor, we can use heading styles as H1, H2, H3,.......
• For Example: <h1> Your First Heading </h1>

In Blogger,

• Heading stands for H2 
• Subheading stands for H3
• Minor Heading stands for H4

How to Apply a Heading in Blogger Post

While writing your post in Blogger post editor, Select text you want to use as Heading and click on heading menu normally shown as Normal button. Click on it and select Heading, Subheading or Minor Heading.

Apply a Style to Heading, Subheading or Minor Heading

Write a code for your headings (Don't confuse read till end) and paste this code in CSS section of your blogger template. CSS section starts from <b:skin> and ends at </b:skin>. You can paste your heading code anywhere between these tags.

1. Go to Template > Edit HTML 
2. Click anywhere in code area and press "Ctrl + F" and find </b:skin>
3. Click on Code Fold button (See Screen Shot below) to expand code and paste the Heading code before </b:skin>
4. Save your Template.

Note: Sign with line 29 is Code Fold Option.

You may use these styles for all three headings, just change h2 with h3 (Subheading) or h4 (Minor Heading).

• Style 1 Code

.post h2{
color:#FF0000;
border-top:1px dotted #FF0000;
border-bottom:1px dotted #FF0000;
font-size: 15pt;
font-weight: bold;
padding:3px;
}

• Style 2 Code 

.post h2{
color:#FF0000;
border:1px solid #FF0000;
font-size: 15pt;
font-weight: bold;
padding:3px;
border-radius: 5px;
}

Change colors, font size and border size which suit you.

Keep in touch, I shall post different heading styles soon!!!

Note: If this tutorial worked for you (and it should work), please leave a comment below. Thanks.