After a long time I am back with a tutorial. In
this tutorial I will show you how to style up your blog post headings. So
without discussing much more about it, I am going to write the necessary steps
that you have to follow to style your blog post headings.(I have found this
tutorial on My Blogger Tricks)
Procedure
1)Go to Blogger Dashboard-------Layout--------Edit HTML
2)Now press Ctrl+F and Search for ]]></b:skin> 3) Just above ]]></b:skin> add one of the following codes
Heading with bottom border
.post h3{
color:#0174DF;
border-bottom:1px dotted #1C1C1C;
font-size: 14pt;
padding:3px;
}
Heading with top and bottom border
.post h3{
color:#0174DF;
border-top:1px dashed #1C1C1C;
border-bottom:1px dashed #1C1C1C;
font-size: 14pt;
padding:3px;
}
Heading surrounded by border
.post h3{
color:#0174DF;
border:2px solid #1C1C1C;
font-size: 14pt;
padding:3px;
}
Heading with Hover effect
.post h3{
color:#0174DF;
border-top:2px dashed #1C1C1C;
border-bottom:2px dashed #1C1C1C;
font-size: 14pt;
}
.post h4:hover{
border-top:2px solid #0080ff;
border-bottom:2px solid #0080ff;
background-color: #289728;
color:#fff;
}
Heading surrounded by a box
.post h3 {
border-bottom: 2px solid #289728;
color:#0080ff;
font-size:14pt;
}
.post h3 span {
position: relative;
left: -0.3em;
bottom: -0.6em;
padding: 1px 0.5em;
margin: 0;
border: 2px solid #289728;
background-color: #fff;
}
Heading with side image and hover effect
.post h3 {
background: #ffffff url(URL OF Side Image) top left repeat-y;
font-size: 14pt;
color: #0090ff;
padding:28px 0 0 44px ;
}
.post h3:hover {
color: #289728;
}
Finally Save your template
Implementation
To implement the style you have to select the texts for your heading and just click on Heading as I have shown in the following image
After applying the style
Note: In step (3) the .post h3 may be .post h2 for your blog, just once check your HTML codes and find out whether it is h3 or h2