Top Classic Heading Box in Post Area

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

•   Topic ! title box 1.1
•   Topic ! title box 1.2          

2.Electrical

•   Topic ! title box 2.1
•   Topic ! title box 2.2  

than this post and my featured post will sure help you....!