× ×

how to make the sidebar 2 columns under the main sidebar

Posted by comportech × 9:21 AM
  1. how to make the sidebar 2 columns under the main sidebar
    notice how carefully and thoroughly ok let me no errors occur
    Login to blogger
    go to Layout => Edit HTML
    after that find this code ]]></ b: skin> and add the code below right above it



    .lsidebar {

    line-height: 1.5em;

    }

    .lsidebar .widget {

    background: #FFFFFF; /* -- bisa sobat ganti dengan kode warna yang lain -- */

    float:left;

    width: 125px; /* -- bisa sobat ganti membesarkan atau mengecilkannya (Panjang) -- */

    margin: 0 0 10px 0;



    }

    #lsidebar h2 {

    height: 20px;

    text-align: center;

    padding:4px 0px 0px 0px;

    font: verdana;

    background:url('http://oketrik.googlecode.com/files/1.jpg'); /* -- bisa sobat ganti dengan kode warna yang lainnya (warna background Judul) -- */

    font-size:12px;

    line-height: 1.4em;

    text-transform:uppercase;

    letter-spacing:.2em;

    color:#fff; /* -- bisa sobat ganti dengan kode warna yang lainnya (warna teks Judul) -- */

    -moz-border-radius: 10px;

    }



    .rsidebar {

    line-height: 1.5em;

    }

    .rsidebar .widget {

    background: #FFFFFF; /* -- bisa sobat ganti dengan kode warna yang lain -- */

    float:right;

    width: 245px; /* -- bisa sobat ganti membesarkan atau mengecilkannya (Panjang) -- */

    margin: 0 0 10px 0;

    }



    #rsidebar h2 {

    height: 20px;

    text-align: center;

    padding:4px 0px 0px 0px;

    font: verdana;

    background:url('http://oketrik.googlecode.com/files/1.jpg'); /* -- bisa sobat ganti dengan kode warna yang lainnya (warna background Judul) -- */

    font-size:12px;

    line-height: 1.4em;

    text-transform:uppercase;

    letter-spacing:.2em;

    color:#fff; /* -- bisa sobat ganti dengan kode warna yang lainnya (warna teks Judul) -- */

    -moz-border-radius: 10px;

    }



  2. after that look for code <div id='sidebar-wrapper'> and put the code below into it

    <div id='lsidebar-wrapper'>

    <b:section class='lsidebar' id='lsidebar' preferred='yes'>

    </b:section>

    </div>

    <div id='rsidebar-wrapper'>

    <b:section class='rsidebar' id='rsidebar' preferred='yes'>

    </b:section>

    </div>


    me give you an example, code such clean Sidebar



    <div id='sidebar-wrapper'>

    <b:section class='lsidebar' id='lsidebar' preferred='yes'>

    </b:section>

    </div>



    the results



    <div id='sidebar-wrapper'>

    <b:section class='lsidebar' id='lsidebar' preferred='yes'>

    <b:widget id='HTML4' locked='false' title='' type='HTML'/>

    </b:section>

    </div>


    Now the intention of putting into it is put the before code </ div> closing the sidebar-wrapper
  3. SAVE and see the results
  4. completed


Tags: × ×
« Previous × Next »

Related Posts

0 comments