How To Change Heading Style In Blogger

Customizing Heading Style Using Simple CSS

Add one of the above Heading Style to your Blogs, do the following,

Go to Blogger > Design > Edit HTML
Search for ]]></b:skin> (Tip:- Press Ctrl + F)
Just above ]]></b:skin> paste one of the codes below,

For Heading Style with a bottom border, use this code,

.post h4{
color:#0080ff;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:2px;
}

For Heading Style with a border at top and bottom, use this code,

.post h4{
color:#0080ff;
border-top:1px solid #289728;
border-bottom:1px solid #289728;
font-size: 12pt;
padding:3px;
}

For Heading Style surrounded by borders, use this code,

.post h4{
color:#0080ff;
border:1px solid #289728;
font-size: 12pt;
padding:2px;
}

For Heading Style with Hover Effect, use this code,

.post h4{
color:#0080ff;
border-top:1px dotted #289728;
border-bottom:1px dotted #289728;
font-size: 12pt;
}
.post h4:hover{
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
background-color: #289728;
color:#fff;
}

For Heading Style surrounded by a Box, use this code,

.post h4 {
border-bottom: 1px solid #289728;
color:#0080ff;
font-size:12pt;
}
.post h4 span {
position: relative;
left: -0.3em;
bottom: -0.6em;
padding: 1px 0.5em;
margin: 0;
border: 1px solid #289728;
background-color: #fff;
}

For Heading Style with a side Image & Hover Effect, use this code,

.post h4 {
background: #fff url(URL OF Side Image) top left repeat-y;
font-size: 12pt;
color: #0090ff;
padding:28px 0 0 44px ;
}
.post h4:hover {
color: #289728;
}

Make sure you replace URL OF SIDE Image Link of your preferred side image.This image can be 45px by 45px in size or even smaller. Now save your template.......

Customization and Implementation of The CSS Code for Headings

All the CSS codes above use simple properties which are described below,

For Changing border width, style and color edit codes  border:1px solid #0080ff

1px refers to border thickness/width and solid refers to border style and the six digit number refers to border color. you can change border style from solid to dotted or dashed. You can use color code generator for getting the six digit number for your desired color.

For Changing Font Size, edit codes like this one,   font-size:12px

To Change Font Color, edit similar codes like this, color:#0080ff  You can use Color Code Generator and wheel

Implementation:-
Now whenever you write a heading in your post inside blogger editor, simple add following pieces of codes next to your heading.

<h4>Your Heading Goes Here</h4>

NOTE:- Changes will not appear inside blogger editor or on previewing. You will only see a bolded black text inside blogger editor. The Styling will take effect only when the post is published.

For Heading Style Surrounded By a Box you will need to add slightly different code as show below,

<h4><span> Your Heading Goes Here </span></h4>

You only need to add an extra span tag, for the box to appear.