Blogger Heading Box

Top Classic Heading Box in Post Area

wanna do different ? than lets start with me. i just fount out the new posting header box with amazing css and also colobrate with blogger html code with directly select heading and sub-heading , no require for codding every time..!

Follow the steps for it...

1. Blogger >> Templates >> Edit HTML
2. Search >> ]]></b:skin>

Now paste the following CSS just above it...

Style- 1



.post h2

{

  background: #67b11c url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/tick_2.png") 20px 50% no-repeat;

  background: #67b11c url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/tick_1.svg") 20px 50% no-repeat;

  border: 2px solid #467813;

  border-radius: 5px;

  color: #fff;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  padding: 15px 20px 15px 50px;

}

Live Demo

Hello Ninjas Here is Demo - 1 Try this Fast as You can

Style- 2



.post h2 

{

 border-radius: 5px 5px 5px 5px;

 box-shadow: 5px 5px 5px #ABABAB;

 color: #3A3A3A;

 border:1px solid #289728;

 font-size: 22pt;

 padding:5px 2px 5px 35px;

 margin:10px 5px 10px 5px;

 border-left:30px solid #3A3A3A; } 



 .post h2:hover 

 {

 border-left:30px solid #0099FF; 

 }

Live Demo

Hello Ninjas Here is Demo - 2 Try this Fast

Style- 3


.post h2

{

    background-attachment: scroll;

    background-color: white;

    background-image: url("http://2.bp.blogspot.com/-Om2OSEw8_Dw/VOTqzN0-                 2dI/AAAAAAAABso/AiT4uNsOVBs/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: 1.5em 0em 1em 0;

    padding: 2px 1px 10px 34px;

    position: relative;

    text-shadow: 1px 1px 0 #000000;

    text-transform: capitalize;

}



.post h2:hover

{

  border-left:10px solid #FC2B2C;

}

Live Demo

Hello Ninjas Here is Demo - 3 Try this Fast as You can

Its Not over ninjas. i am still searching for new heading box css for you as possible as new in feature.. so daily check for update and feel free to share....
You Might also like Sub-Heading boxes under Heading Boxes
Fo Example Here is Some Topic About Engineering Discussions and You like to define title more effectively ,Like

1.Mechanical