Friday, August 10, 2012

Custom CSS Heading Style For Blogger


Heading tag especially <h2> is used for better search engine optimization tricks. Here is some CSS code which makes your heading awesome and nice looking. As example you can see i am using custom CSS heading tag

Custom CSS Heading Style For Blogger
  • Go To Blogger Dashboard

  • Click on Design Tab

  • Now click on Edit HTML

  • Find the following code

  • ]]></b:skin>
  • Now place the CSS code above the ]]></b:skin> as your choice

  • Style 1

    .post h2
    {
    background: #FBFBEF;
    font-size: 20px;
    padding: 4px 10px;
    color: #333;
    text-shadow: 1px 1px 1px #AAA;
    border-bottom: 4px solid #01DF01;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: 1px 1px 2px #AAA;
    -moz-box-shadow: 1px 1px 2px #AAA;
    box-shadow: 1px 1px 2px #AAA;
    margin: 6px 3px;
    text-transform: capitalize;
    width: 95%;
    line-height: 1;
    }

    Style 2

    .post h2 {
    font-size: 24px;
    padding: 5px;
    color: #fff;
    text-shadow: 1px 1px 1px #333;
    background: #E3BC50;
    border-left: 20px solid #B9942D;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 1px 1px 2px #333;
    -moz-box-shadow: 1px 1px 2px #333;
    box-shadow: 1px 1px 2px #333;
    margin: 10px 0;
    text-transform: capitalize;
    width: 94%;
    line-height: 1;
    }

    Style 3

    .post h2 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0c12iHEHHB2j79BSGQYIpf64IJoVOgzEMtCgYm4NIEjj5DgQEiW4psJanczqDl7nvE01-v1Vu4_ESBGot9zzKz3oaiskWwEjoWkqhS0_6Tuk9KRknRwYe3cCSSsc4Ht4ao-gFlPyJLug/s1600/h3.png") no-repeat 4px center transparent;
    font-size: 20px;
    font-family: Oswald;
    font-weight:normal;
    padding: 3px 10px 3px 80px;
    color: #0274be;
    border: 3px solid #5bb5f0;
    text-shadow: 0 1px 0 #CCC;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    -moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
    -webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
    box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
    margin: 15px 3px;
    text-transform: uppercase;
    line-height: 1.3;
    }

    Style 4

    .post h2 {
    color:#666;
    border-left:10px solid #666;
    border-right:10px solid #666;
    padding:3px 5px 3px 20px;
    border-radius:15px;
    -moz-border-radius:15px;
    box-shadow:0px 0px 13px #666;
    -webkit-box-shadow:0px 0px 13px #666;
    -moz-box-shadow:0px 0px 13px #666;
    }
    .post h2:hover {
    color:#FF133F;
    border-left:10px solid #FF133F;
    border-right:10px solid #FF133F;
    box-shadow:0px 0px 13px #FF133F;
    -webkit-box-shadow:0px 0px 13px #FF133F;
    -moz-box-shadow:0px 0px 13px #FF133F;
    }

    Style 5

    .post h2
    {
    margin-top:10px;
    max-width:840px;
    padding:6px 2px;
    color: #000000;
    padding-left:10px;
    margin-bottom:10px;
    font-size:20px;
    font-family:'georgia';
    background-color:#F8FAFD;
    text-decoration:none;
    border-left:10px solid #3873CC;
    box-shadow:1px 1px 2px gainsboro;
    transition: border-left .777s;
    -webkit-transition: border-left .777s;
    -moz-transition: border-left .777s;
    -o-transition: border-left .777s;
    -ms-transition: border-left .777s;
    }
    .post h2:hover {
    border-left:10px solid#FF0000;
    }
    Different CSS code has different style. Choose any of them as your choice


    Please like our Facebook Page or Follow us on Twitter or Subscribe

    0 comments:

    Click Here To add Comment