How To Change Heading Style In Blogger

http://4.bp.blogspot.com/-75gs57uDSfs/UWyktNFpVaI/AAAAAAAABsA/_BarkIfxprA/s1600/custom-headings-guide.png


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.
 Customize Heading Styles in Blogger

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.
 Customize Heading Styles in Blogger
Note: Sign with line 29 is Code Fold Option.

Different Style Heading Codes and Demos

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

 Customize Heading Styles in Blogger

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!!!

2 comments:

  1. Submit your blog or website now for appearing in Google and 300+ search engines!

    Over 200,000 sites indexed!

    SUBMIT NOW using I NEED HITS!

    ReplyDelete

 
Top