Custom CSS Heading Style For Blogger(Blog trick)

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



  • 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/AVvXsEiAs9XLMdEZksPm2frPWkc_Fx6eUAqyhPVPiyWU0eWjFvnSrgH8gfnDGHIfdPX4PB1r1XPwGoNDto6vb4cMx2DAnu97cukk-h9BciScws81uYU4q884vGk6eqkROXnykxRiiDc9qI56n4U/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
    Share this article :
     

    Post a Comment

     

    Copyright © 2011. Tricks Duniya - All Rights Reserved