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
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
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
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;
}
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
- Topic ! title box 1.1
- Topic ! title box 1.2
- Topic ! title box 2.1
- Topic ! title box 2.2
than this post and my featured post will sure help you....!
No comments:
Post a Comment