Cara Membuat Multi Sidebar (6 Buah )

Postingan ini dikhususkan untuk blog yang selama ini mengikuti postingan Exploration dan yang telah memiliki tiga sidebar yaitu sidebar atas dan yang duanya ada dibawah sidebar atas.
Jika anda belum melengkapi dengan ketiga sidebar tersebut silahkan kunjungi postingan ini untuk membuatnya

► MENAMBAH SIDEBAR JADI 2
► TAMBAH LAGI SIDEBAR BLOG ANDA JADI 3 BUAH

Setelah sidebar anda menjadi tiga, barulah anda lanjutkan baca postingan ini.
Tiga sidebar yang dimiliki Exploration diberi nama : Sidebar-wrapper, Sidebarbaru-wrapper dan Sidebaratas-wrapper.
Tiga sidebar yang akan ditambahkan harus memiliki ukuran yang sama dengan ketiga sidebar diatas dan penamaannya harus berbeda dengan nama sidebar yang telah ada.
Nama sidebar yang ditambahkan di blog Exploration diberi nama sebagai berikut :

1.    Sidebartengah-wrapper : memiliki ukuran sama dengan sidebar atas wrapper.
2.    Sidebarbawah-wrapper : memiliki ukura yang sama dengan sidebar-wrapper.
3.    Sidebarbawahbaru-wrapper : memiliki ukuran yang sama dengan sidebarbaru-wrapper.

Setelah siap dengan nama ketiga sidebar yang akan ditambahkan, ikuti langkah-langkah berikut ini :

1. Masuk ke Edit HTML.
2. Back up dulu templatenya kalau takut gagal.
3. Cari kode ini :

    #sidebarbaru-wrapper {
    width: 230px;
    float: right;background:#0066CC; border:0px solid $bordercolor;white;
    padding:5px 5px .25em;
    padding-left:5px;
    word-wrap: break-word;
    overflow: hidden;
    }

(mungkin pada sebagian template memiliki istilah yang berbeda).

4. Copy kode dibawah ini kemudian paste tepat dibawah kode tadi :

    #sidebartengah-wrapper {
    border: 0px solid #0066CC;
    background:#3D81EE;
    width:470px;
    float:right;
    padding:5px;
    margin-bottom:5px;
    }

    #sidebarbawah-wrapper {
    width: 230px;
    float: $endSide;background:#0066CC; border:0px solid $bordercolor;white;
    padding:2.5px 2.5px 2.5px .5em;
    word-wrap: break-word;
    overflow: hidden;
    }
    #sidebarbawahbaru-wrapper {
    width: 230px;
    float: $endSide;background:#0066CC; border:0px solid $bordercolor;white;
    padding:5px 5px .25em;
    word-wrap: break-word;
    overflow: hidden;
    }

5. Selanjutnya cari kode ini :

<div id="sidebarbaru-wrapper">
<b:section class="sidebar" id="sidebarbaru" preferred="yes"></div><lu>

6. Copy kode dibawah ini kemudian paste tepat diatas kode tadi.

    <div id='sidebarbawahbaru-wrapper'>
    <b:section class='sidebarbawahbaru-wrapper' id='sidebarbarubawah-wrapper' showaddelement='yes'>
    </b:section>
    </div>

    <div id='sidebarbawah-wrapper'>
    <b:section class='sidebarbawah-wrapper' id='sidebarbawah-wrapper' showaddelement='yes'>
    </b:section>
    </div>

    <div id='sidebartengah-wrapper'>
    <b:section class='sidebaratas' id='sidebartengah' showaddelement='yes'>
    </b:section>
    </div>

7. Klik tombol Simpan template

Jika ingin sidebar yang baru kita tambahkan tampil dalan bentuk kotak-kotak, lakukanlah langkah-langkah berikut.

1. Masih di Edit HTML.
2. Cari kode ini .sidebaratas .widget{ untuk menempatkan sidebartengah .widget
3. Copy seluruh kode dibawah ini kemudian paste tepat dibawahnya.

    .sidebartengah {
    color: $sidebartextcolor;
    line-height: 1.5em;
    }
    .sidebartengah ul {
    list-style:none;
    margin:0 0 0;
    padding:0 0 0;
    }
    .sidebartengah li {
    margin:0;
    padding-top:0;
    padding-$endSide:0;
    padding-bottom:.25em;
    padding-$startSide:15px;
    text-indent:-15px;
    line-height:1.5em;
    }
    .sidebartengah .widget{
    background:#3D81EE;
    border:2px solid #66B5FF;
    margin:0 0 0em;
    padding:0.5em;
    }

4. Cari kode ini .sidebar .widget{ untuk meletakan .sidebarbawah-wrapper .widget{ dan .sidebarbawahbaru-wrapper .widget{
5. Copy seluruh kode dibawah ini dan paste tepat diatas kode .sidebar .widget{

    .sidebarbawah-wrapper .widget{
    background:#3D81EE;
    border:2px solid #66B5FF;
    margin:0 0 0.5em;
    padding:0.5em;
    }

    .sidebarbawahbaru-wrapper .widget{
    background:#3D81EE;
    border:2px solid #66B5FF;
    margin:0 0 0.5em;
    padding:0.5em;
    }

6. Silahkan anda ganti sesuai dengan warna kesukaan anda.
7. Setelah selsai pengeditan klik Tombol Simpan Template.

NB:
Sekali lagi lagi postingan ini khusus untuk blog yang telah mengikuti postingan Exploration dan yang telah menambah sidebar menjadi 3 buah.

♂ Good Luck ♀

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's