Tuesday, October 11, 2011

cara buat sidebar 2 kolom di bawah sidebar utama

senantiasa belajar
cara buat sidebar 2 kolom di bawah sidebar utama
perhatikan caranya dengan seksama dan teliti ok biar tidak terjadi kesalahan
  1. Login ke blogger
  2. masuk ke Tata Letak => Edit HTML
  3. setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya

    .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;
    }

  4. setelah itu cari kode <div id='sidebar-wrapper'> dan taruh kode di bawah ini ke dalamnya


    <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>



    Bingung y ? oke saya kasih contohnya, kode Sidebar yang bersih seperti

    <div id='sidebar-wrapper'>
    <b:section class='lsidebar' id='lsidebar' preferred='yes'>
    </b:section>
    </div>


    dan kalau ada widgetnya kurang lebih seperti

    <div id='sidebar-wrapper'>
    <b:section class='lsidebar' id='lsidebar' preferred='yes'>
    <b:widget id='HTML4' locked='false' title='' type='HTML'/>
    </b:section>
    </div>


    nah sekarang maksud dari menaruh ke dalamnya adalah sobat taruh kode yang tadi saya kasih tepat di atasnya </div> penutup sidebar-wrapper begitu loh sob
  5. Setelah itu simpan deh dan lihat hasilnya
  6. Selesai
trims"
senantiasa belajar cara buat sidebar 2 kolom di bawah sidebar utama


No comments:

Post a Comment