Latest : What is Blog?

Ad 468 X 60

Friday, 8 March 2013

Widgets

7 Top professional css sub headings for blogger

Headings-for-blogger
With recent updates ,search engine bots like <h2> tags for post titles for better SEO optimization but if your blog is still using old <h3> tags then we recommend you to change to <h2> tags because it is seo friendly post titles.
Sub heading in posts are something that attract users to read your content carefully and can be customize it by css style sheet but how can you use it and where does style tag go? It goes to post area section of your blogger template. You can find it as .post h2, .post h3, .post h4,.post h5 etc ,these are called sub heading.So in order to edit it first you need to search existing css custom heading tag or you may call it custom html tags css.

How to add css h2 custom heading in blogger?

1.Go to blogger > Template > Edit html.
2.Search for .post h3 (Ctrl+f to search).
3.Replace .post h3 with any of the following css heading style.

  • Heading style 1:
Subheading 1
.post h3 {
background-attachment: scroll;
    background-color: white;
    background-image: url("http://2.bp.blogspot.com/-GZCR82-F-bU/UTnAhdjJ9eI/AAAAAAAAbXI/Fy0CjGpYCMM/s1600/h2.png");
    background-position: 4px 50%;
    background-repeat: no-repeat no-repeat;
    border: 3px solid;
    border-radius: 60px 60px 60px 60px;
    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;
    list-style: none outside none;
    margin: 15px 3px;
    outline: medium none;
    padding: 3px 10px 3px 30px;
    text-shadow: 0 1px 0;
    text-transform: uppercase;
    vertical-align: baseline;
}
  • Heading Style 2:
Subheading 2
.post h3 {
    background-attachment: scroll;
    background-color: white;
    background-image: url("http://4.bp.blogspot.com/-tFJEmtdTP9s/UTnAR0IbXxI/AAAAAAAAbXA/WO-NEvmKtXA/s1600/h2.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: 26px;
    font-weight: normal;
    margin: 0 0 1em;
    padding: 0 1px 4px 34px;
    position: relative;
    text-shadow: 1px 1px 0 #000000;
    text-transform: capitalize;
}
  • Heading Style 3:
Subheading 3
.post h3 {
border-bottom: 1px dotted #4E555A;
border-top: 1px dotted #4E555A;
color: #4E555A;
padding: 3px;}
  • Heading Style 4:
    Subheading 4
.post h3 {
border-bottom: 1px dotted #0080FF;
border-top: 1px dotted #0080FF;
color: #0080FF;
padding: 3px;
}
  • Heading Style 5:
Subheading 5
.post h3{
background: url("http://1.bp.blogspot.com/-zs4aWzVV5J4/UTm__Ri99eI/AAAAAAAAbW4/a--rNrWDM9Q/s1600/h2.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;
}
  • Heading Style 6:
Subheading 6
.post h3 {
background: url("http://1.bp.blogspot.com/-wo4kiWscFy4/UTm_U5Uz8FI/AAAAAAAAbWo/vWgBX1TCQO0/s1600/star.png") no-repeat scroll 5px center transparent;
clear: both;
color: #662D2D;
font-family: 'Oswald',sans-serif;
font-size: 26px;
font-weight: bold;
line-height: 1.2;
margin: 25px 5px;
padding: 6px 10px 2px 40px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
Hope you will like heading for blogger posts and if you get any problem then comment below ,we will try to help you as soon as possible.
Peace and happy blogging.Smile

Subscribe To Get FREE Tutorials!

Shares
Author: Azad
Azad is the founder of AFC Network which deals with online blogging,seo,gadgets,symbian and android phones. Read More →

7 comments

11 April 2013 18:30

nice

13 April 2013 15:02


Hello
Its a great Tutorial but i wanna h4 heading p[lease share it ......

14 April 2013 09:35

@Mahendra Meghwal
Yes you can use the above sub heading as h4. Just you need to change .post h3 to .post h4, thats it. Enjoy happy blogging.

15 June 2013 16:13

Great information
Web Designer in Bangalore

In my template there is no '.post h3' in it though expending all the arrows. what should be there in place of '.post h3' ???
-Hindi Tracks

6 October 2013 15:27

thank you

28 December 2013 13:52

THank U SO MUch