BEST HEADING STYLE FOR BLOGGER

 

Heading is very important while writing a long post.If we need to differentiate post then we use heading.But blogger custom heading is not so good,with Css3 coding I made it very attractive.

If you want to add heading to blogger then follow below steps-

• Go To Blogger Dashboard
• Click on Template tab.
• Now click on Edit HTML button
• Find ]]></b:skin> Any one of the following code above ]]></b:skin>

 

Style 1

Demo

.post h2
{
background: #FBFBEF;
font-size: 20px;
padding: 4px 10px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #01DF01;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height: 1;
}

Style 2

Demo

.post h2 {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
}

Style 3 

DEMO

.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQsVBJaM9H403WE9t_-hR0WvaJWbIztPAWwznekja-NfAoCf47fWSTJ1XWWBZ4BuPyKZdyQun_VObMtokoUESj-2wla2_K31SA_L5BK80W8DY15nUvny8t5zi1nbppNattGsDa5SGNJM/s1600/h3.png") no-repeat 4px center transparent;
font-size: 20px;
font-family: Oswald;
font-weight:normal;
padding: 3px 10px 3px 80px;
color: #0274be;
border: 3px solid #5bb5f0;
text-shadow: 0 1px 0 #CCC;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
-moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1.3;
}

Style 4 

Demo

.post h2 {
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;
}
.post h2:hover {
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Style 5 

Demo

.post h2
{
margin-top:10px;
max-width:840px;
padding:6px 2px;
color: #000000;
padding-left:10px;
margin-bottom:10px;
font-size:20px;
font-family:&#39;georgia&#39;;
background-color:#F8FAFD;
text-decoration:none;
border-left:10px solid #3873CC;
box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h2:hover {
border-left:10px solid#FF0000;
}
After Adding Css Code Follow below steps to add heading in between post-

While writing post If you want to add heading then select text in which you want to add heading decoration.
Now select heading option From Drop Menu And Enjoy Heading. 

Comment if You Enjoy This post

6 Easy Ways To Customize Heading Style In Blogger & Wordpress – Customize Heading Tags

 

 

 

 

 

 

Customizing Heading Style Using Simple CSS – For Blogspot Users

I have six different Heading styles for you guys. Have a look at the video below,

Now to add one of the above Heading Style to your blogs, do the following,

1. Go To Blogger > Layout > Edit HTML
2. Search For ]]></b:skin>                  (Tip:- Press Ctrl + F )
3. Just above ]]></b:skin> paste one of the codes below,

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

.post h3{
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 h3{
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 h3{
color:#0080ff;
border:1px solid #289728;
font-size: 12pt;
padding:2px;
}

• For Heading Style with Hover Effect, use this code,

.post h3{
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 h3 {
border-bottom: 1px solid #289728;
color:#0080ff;
font-size:12pt;
}
.post h3 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 h3 {
background: #fff url(URL OF Side Image) top left repeat-y;
font-size: 12pt; 
color: #0090ff;
padding:28px 0 0 44px ;
}
.post h3:hover {
color: #289728;
}

Make Sure you replace URL OF Side Image with Image Link of your preferred side image. This image can be 45px by 45px in size or even smaller. I have used the following image in the video above –>

      4.     Now Finally save your template.

Customization and Implementation Of The CSS Code For Headings

Customization:- 
All the CSS codes above use simple properties which are described below,
1.   For Changing border width, style and colour edit codes like this one,
border:1px solid #0080ff
Here 1px refers to border thickness/width and solid refers to border style and the six digit number refers to border colour. You can change border style from solid to dotted or dashed. I like border style to be dotted because it gives a light appearance.
You can use our CSS Colour Chart for getting the six digit number for your desired colour
2.    For Changing Font Size, edit codes like this one,
font-size:12pt 
If you want the text size to increase or decrease than respectively increase or decrease this value 12pt
3.    To Change Font Colour, edit similar codes like this one,
color:#0080ff
You can use our CSS Colour Chart for getting the six digit number for your desired colour
Implementation:-
Now Whenever you write a heading in your post inside blogger editor, simply add the following pieces of codes next to your heading,

<h4> Your Heading Goes Here </h4>

See a screen shot below,
Update: In the image below I have mistakenly written

,

tag please convert it to

and

respectively. 

This can be done both in compose or HTML mode.
For Heading Style Surrounded By a Box you will need to add slightly different code as shown below,

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

We only need to add an extra span tag (i.e:- <span>) for the box to appear.
That’s All!
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.

Customizing Heading Style Using Simple CSS – For Wordpress Users

To be honest I really hate wordpress because it has nothing interesting for new web designers like me. It uses complex php script that few understands and also has a complex CSS editing option that has never went through my throat. If you are an expert wordpress user then you can use the blogspot method above to style headings in your wordpress template but if you find it difficult to edit wordpress style sheet like me then you can adopt a simple way as described below.
We can only apply three out of six Heading style methods to wordpress which are,

1. Heading Style with a bottom border
2. Heading Style with a bottom border and top border
3. Heading Style surrounded by borders

To apply any of the heading style above, do this in your Wordpress Editor,

1. In the visual mode of your Wordpress editor first write a heading
2. Now switch to the HTML mode and enclose your heading with the following code,

• For Heading style with a bottom border, use this code,

<h3><div style="color:#0080ff; border-bottom:1px solid #289728;
font-size: 12pt; padding:2px;">Your Heading Goes Here</div></h3>

• For Heading style with a bottom border and top, use this code,

<h3><div style="color:#0080ff; border-top:1px solid #289728;
border-bottom:1px solid #289728; font-size: 12pt; padding:3px;">Your Heading Goes Here</div></h3>

• For Heading style surrounded by borders, use this code,

<h3><div style="color:#0080ff; border:1px solid #289728; font-size: 12pt; padding:2px;">Your Heading Goes Here</div></h3>

The green text is where your heading must lie and the bolded black text is the code that should surround your heading. Now once you have added the codes correctly, simply switch to the visual mode and you will see the heading style in action! See some screen shots below for heading style surrounded by borders,
First enclose your heading with html codes above in the html mode,
Update: In the image below I have mistakenly written

,

tag please convert it to

and

respectively.  



Then press the visual button to see the effect live!

To customize the styles read the customization guide for blogspot users
Hope it was clear :>>