5 Best Heading style for blogger–Part 1

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-

Heading style for blogger

• Go to Blogger.com.
• Login to your Blogger Dashboard.
• Then navigate to Template (Design in old interface) –> Edit HTML.
• Find ]]></b:skin> Add any one of the following code above ]]></b:skin>

.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;
}

.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;
}

.post h2 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0sok3_CzjlFC5BJE9AEtlIbNkR9EQhYpr4F3kE2pcjFPxMZ_Z7XKO770924ZvBkbiKVBLDmPmBFbUgvHTYlzWlM3wwqzb4lqbMkaH4XQxjt6wXZACqLj2itGuZ86BKn7slk0xdljEUU/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;
}

.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;
}

.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 posts. 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. Or alternatively you can post your text between <h2>Your text Here………..</h2>.

If you like this then please subscribe to Our feeds and Like us on Facebook for Future Updates. Thank you.