How to Create a 3 Column Widget at Bottom Header

NgeBlog ™, this share on How to Create a 3 Column Widget at Bottom Header. In this way almost similar to the way of making 3 columns widget under the posts. but which I share today is a 3 Column Widget at Bottom Header.



ok  not have long-term Down to brass tacks ...







Step by step How to Create a 3 Column Widget at Bottom Header:

1. Blog login

2. Design => edit HTML (tick the Expand Widget Templates)

3. Find this code ]]></ b: skin>

4. Then put the following code right above the ]]></ b: skin>



    /* Top Header

    ---------------------------- */

    #topheader {

    width:930px;

    clear:both;

    float:left;

    color:#333;

    background:#fff;

    margin:0 auto;

    padding:0 0 10px;

    }





    #topheader a:visited {

    color:gray;

    text-decoration:none;

    }





    #topheader h2 {

    font-size:11px;

    font-weight:700;

    line-height:1.4em;

    text-transform:uppercase;

    border-bottom:1px dotted silver;

    margin:0 0 10px;

    padding:20px 0 2px;

    }





    #topheader ul {

    color:#333;

    margin:0;

    padding:0;

    }





    #topheader ul li {

    list-style-type:none;

    background:fff;

    border-bottom:1px dotted #ccc;

    padding-left:17px;

    margin-top:2px;

    }





    #left-topheader {

    width:360px;

    float:left;

    padding-left:15px;

    }





    #center-topheader {

    width:230px;

    float:left;

    padding:0 20px;

    }





    #right-topheader {

    width:260px;

    float:right;

    padding-right:15px;

    }

Please pal HTML code above modifications to fit your blog template. 



5. Looking for code like below, if there is no search for the code that is almost the same as this dibwah code.



<b:section class='blogname' id='top' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='NgeBlog ™ (Header)' type='Header'/>

</b:section>



In writing in red depending on the name of your blog.

 

6. then add the following code under the code above.



    <div id='topheader'>

    <b:section class='topheader' id='left-topheader' preferred='yes'/>

    <b:section class='topheader' id='center-topheader' preferred='yes'/>

    <b:section class='topheader' id='right-topheader' preferred='yes'/>

    </div>



7. Save



Hopefully Helpful