Top 10 Best Stylish Heading Tags for Blogger with CSS
Top best Heading Styles for Blogger blogs, as you know every person has own choice, therefore below i have shown all best styling tags so that you could choose and use according to your desire.
You can easily use below Headings with H1, H2, H3, H4... according to your wish. Just simply change h3 with your required number of h. If you still face any problem then kindly read the below post.
Top 10 Stylish Heading Tags for Blogger
After 4 Hours hardworking i have found 10 best heading styles for blogger. So you should see them and try one of them in your blog according to your desire.
Style #1
This is the best sub-heading tag ever having beautiful rounded borders around it. You can use it in your article as H1, H2, H3 and so on.
Screenshot #1
.post h3 {
background-attachment: scroll;
background-color: white;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHQtIRIBCmUAdsIvFd0KyO26qpyz-20gLjQ5M7uRwHnry8hia3GOnJ-UEkdjF4eW29obx4gNDVQyNBtFrRDbbIrrv6CI1jEYeQGbSccxUyghibsjs0U3r0t2l-ok51QhQhrT52uOMRYNeu/s1600/h3.png');
background-position: 5px 40%;
background-repeat: no-repeat no-repeat;
border: 2px solid;
border-radius: 80px 80px 80px 80px;
box-shadow: 0 1px 3px, 1px 1px 0 inset;
color: #333333;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: 1.7;
list-style: none outside none;
margin: 13px 3px;
outline: medium none;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0;
text-transform: uppercase;
vertical-align: baseline;
}
Style #2
This is another best style having large writing font with proper rounding border and beautiful tiny icon with green colored appearance.
Screenshot #2
12345678910111213141516171819.post h3 {
background-attachment: scroll;
background-color: white;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhufqwfTNoxNDrhHLLP2KPkx6KhhJ-M2uPsp0DkKiGorHI-hWq0YdLkFOtsS9CTRvGRre6SpoS9oyb_t_UuoCOsQCQzgL4h7k4JDaCdYvm-edGKTVC2HK8ldgnT9bTtEHnxPwJEVuCUllcx/s1600/h3.png");
background-position: 0 50%;
background-repeat: no-repeat no-repeat;
border: 3px solid #0D7005;
border-radius: 14px 14px 14px 14px;
box-shadow: 3px 3px 3px #ABABAB;
color: #25991C;
font-family: Lobster,cursive;
font-size: 20px;
font-weight: normal;
margin: 0 0 1em;
padding: 0 1px 4px 34px;
position: relative;
text-shadow: 1px 1px 0 #000000;
text-transform: capitalize;
}
Style #3
It is as same as style #1 but different in color and font size appearance. Choose only that which suits to your website's template structure.
Screenshot #3
123456789101112131415.post h3{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHQtIRIBCmUAdsIvFd0KyO26qpyz-20gLjQ5M7uRwHnry8hia3GOnJ-UEkdjF4eW29obx4gNDVQyNBtFrRDbbIrrv6CI1jEYeQGbSccxUyghibsjs0U3r0t2l-ok51QhQhrT52uOMRYNeu/s1600/h3.png") no-repeat scroll 4px center transparent;
border: 3px solid #C8C800;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
color: #A5A503;
font-family: ‘lobster’,sans-serif;
font-size: 19px;
font-weight: bold;
line-height: 1;
margin: 15px 3px;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
}
Style #4
This awesome looking heading tag is one of the best by its well looking borders. If you want to put heading tags on center above the paragraph in post then it is the best choice.
Screenshot #4
123456789101112131415.post h3{
text-align: center;font-weight:bold;border:solid 5px #999c3b;
font-size:17px;
-moz-border-radius-topleft: 75px;
-moz-border-radius-topright:75px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:75px;
-webkit-border-top-right-radius:75px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:75px;
border-top-right-radius:75px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;padding:3px}
Style #5
This is sky blue colored rounded heading style tag for blogger blog, which suits clean structured template.
Screenshot #5
1234567891011121314.post h3{
text-align: center;font-weight:bold;border:solid 4px #0fc7ff;font-size:17px;
-moz-border-radius-topleft: 55px;
-moz-border-radius-topright:55px;
-moz-border-radius-bottomleft:55px;
-moz-border-radius-bottomright:55px;
-webkit-border-top-left-radius:55px;
-webkit-border-top-right-radius:55px;
-webkit-border-bottom-left-radius:55px;
-webkit-border-bottom-right-radius:55px;
border-top-left-radius:55px;
border-top-right-radius:55px;
border-bottom-left-radius:55px;
border-bottom-right-radius:55px;}
Style #6
This is Underline Heading Style having blue colored Font and Light Green colored Line.
Screenshot #6
1234567891011121314.post h3 {
border-bottom: 1px 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: 1px solid #289728;
background-color: #fff;
}
Style #7
It is Blue Colored Heading Tag having dotted lines covered whole writing font.
Screenshot #7
12345.post h4{
color:#0080ff;
border-top:1px dotted #0080ff;
border-bottom:1px dotted #0080ff;
padding:3px;}
Style #8
This is another awesome heading style for blogger having great font style with tiny star icon on left side.
Screenshot #8
123456789101112.post h3 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvDdhQVjjhnVPfYhGoTzB9qdwpMsgZfuqiON1EEx93u4hXDfPaJRMJPS_H54-8dUtokRdqh1om0ro1Ck9OQNiVWtW_R6oFDbd_jXWsjD7LbwtI1TcoAoBRehHPmtriyZQEsNzAGUfAiHV/s1600/star.png") no-repeat scroll 5px center transparent;
clear: both;
color: #662D2D;
font-family: ‘Oswald’,sans-serif;
font-size: 22px;
font-weight: bold;
line-height: 1.2;
margin: 25px 5px;
padding: 6px 10px 2px 40px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase; }
Style #9
This is black colored H4 Heading Tag that is being used by
Mybloggertricks. You can also use it on H3 or H2 but if you use it on H4 then it will be more fit.
Screenshot #9
12345.post h4 {
border-bottom: 1px dotted #4E555A;
border-top: 1px dotted #4E555A;
color: #4E555A;
padding: 3px;}
Style #10
This is called Sky Heading Tag for Blogger. It is simple sub-heading tag having blue colored font and rectangle rounded border.
Screenshot #10
12345678.post h3{
color:#58ACFA;
border:1px solid #58ACFA;
font-size: 13pt;
font-weight: bold;
padding:3px;
border-radius: 4px;
}
Final Words
These are the best Heading styles for Blogger on the internet which i have shared with you guys. Hope you have liked my this heading collection. if you have question regarding to this post then feel free to contact with me. Just drop your comment by below comment section, i am here to solve your problem.
