How To Change Heading Style In Blogger Using CSS

How To Change Heading Style In Blogger with CSS? That is the question which my all friends ask me frequently to make their websites posts more attractive and user friendly, as you can see I also use custom sub-headings to make my articles more eye catching and user friendly. Because giving proper headings in an article is the best way to make any content effectively readable, so if your old headings tags adopt an awesome style then your post become more beautiful and attractive. So in this article we will learn a trick to customize H1, H2, H3, H4 and H5 tags into an awe-inspiring look. So keep reading to know more about it...

< Demo >

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. Below I have mentioned some well looking Heading designs you may like them.

Simple Steps to Write SEO Friendly Post in 2015

Easy Steps to Customize Heading Style in Blogger

Here in this section i will tell you two steps about customizing sub-heading tags into template html settings and adding h2, h3 and h4 tags in blogspot post.

Add Professional Author Box below every Post

1# Adding Sub-Headings CSS Style in Blogger Template

1. Navigate to Blogger Dashboard >> Template >> Edit HTML

2. Now search for ]]> and paste below piece of code just above ]]>

.post-body h3 {font-size:120%; font-weight:bold;
padding-bottom: 5px; margin: 10px 0;
background: #E3F0F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvJrpodDGLWJSAKh80kdkzNutC9hFjyClWCaySMU5nwwXosiko2jV0-JuewKWrxn5SHjNSR1ue4LfvDjdvDkAb3hKah75drX7TNPeibenmKUKPiQk-USA4XEAD-YlXt1RwdeacoX_9aYI/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;
}

3. Now click on "Save Template" button to save your settings.

Note:

i) If you want to use the above professional Headings Tag with H2, H4 or H5 then simply replace .post-body h3 with .post-body h2 or .post-body h4 or .post-body h5 according to your wish.

ii) To change icon simply put your icon image link in the place of https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfvJrpodDGLWJSAKh80kdkzNutC9hFjyClWCaySMU5nwwXosiko2jV0-JuewKWrxn5SHjNSR1ue4LfvDjdvDkAb3hKah75drX7TNPeibenmKUKPiQk-USA4XEAD-YlXt1RwdeacoX_9aYI/s1600/note.png

Prevent Spam Comments in Blogspot Blogs

2# How to Add Headings / Sub-Headings into any Post

While writing an article in Blogger post editor, Select whole text you want to use as Heading and click on headings menu button. Click on it and choose Heading, Subheading or Minor Heading according to your desire.

Helping Tips:

In Blogger when we use HTML editor, we can use headings style as H2, H3 and H4 only

For Example in HTML language we write it like this

Your First Heading

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

But if you want to write words into H5 tag then you have to write it manually into HTML language.

I always try my best to provide you best quality tutorials, so in next tutorial i will share Top 12 Best Headings Style for Blogger blogs. 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.