Style Sub-Headings In Your Blogger’s Post Using CSS

You have seen in many other blogs that there sub-headings are shown with a little bit of style like top and bottom borders or any other. It’s a nice way to style your sub-heading so that it looks beautiful and eye catching. Readers find it easy to locate a certain section of your post and it will save the time of your reader.

Style Sub-Headings In Your Blogger's Post Using CSS

In this post, I will show you how you can style your sub-headings using CSS.

Style Sub-Headings In Your Blog Using CSS

1. Open your blogger dashboard. Now go to ‘Template’ and click ‘Edit HTML’.
Style Sub-Headings In Your Blogger's Post Using CSS
2. Click anywhere inside the code box. Now using the keys Control+F, open the search box. Write 
]]></b:skin> inside it and hit enter to find it.
3. Now copy and paste one of the following given codes just above it.
To show only a bottom border
.post h3{ 
color:#0080ff; 
border-bottom:1px solid #289728; 
font-size: 12pt; 
padding:2px; 
}
To show both top and bottom border
.post h3{ 
color:#0080ff; 
border-top:1px solid #289728; 
border-bottom:1px solid #289728; 
font-size: 12pt; 
padding:3px; 
}
To show border from all sides 
.post h3{ 
color:#0080ff; 
border:1px solid #289728; 
font-size: 12pt; 
padding:2px; 
}
If you want dotted border insteas of solid, then replace solid with dotted.
4. Save the template and you are done.

How To Use It On Your Blog?

To use it, select Sub-Heading as show below
Style Sub-Headings In Your Blogger's Post Using CSS
or Write your Sub-Heading as 
<h3>Your Sub-Heading Here</h3>

Add a Comment

Your email address will not be published. Required fields are marked *