Sunday, October 26, 2014
Browse |
home»
blog
»
headings
»
how
»
post
»
style
»
to
|
How to style blog post headings
How to style blog post headings
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 ]]> 3) Just above ]]> 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
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment