Arham Ghauhar: Cara Membuat Sidebar Dua Kolom: Kanan-Kiri

Sabtu, 15 Oktober 2011

Cara Membuat Sidebar Dua Kolom: Kanan-Kiri

Membuat sidebar dua kolom tidaklah susah, Seperti pada blog saya ini. Sekarang sudah ada sidebar di kanan dan kiri postingan saya. Kali ini saya akan memberikan trick membuat sidebar dua kolom.

Update: sekarang saya tambahkan kode ul / ul li agar terdapat icon.
Bagi yang pernah menggunakan trick ini bisa diperbarui dengan menambahkan kode yang tersedia.

Perlu diingat setiap blog mempunyai variasi terendiri dalam peletakkan kode HTML. Jadi harap diperhatikan.

1. Login ke account blog anda.

2. Pilih Tata Letak kemudian Edit HTML.

3. Beri tanda centang pada Expand Widget Templates.

4. Cari kode berikut ini atau sejenisnya. (yang penting tulisan bewarna merah)

   #sidebar-wrapper {
    float: right;
    width: 350px;
    margin: 20px 15px auto 0;
    padding: 0 0 10px;
    display: inline;
        text-align:justify;
        border:1px dashed #ceceae;
   }

5. Kemudian kopi paste kode dibawah ini tepat diatas kode #sidebar-wrapper {

#newsidebar-wrapper {
width: 200px;
float: left;
padding-left:8px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
border:1px dashed #ceceae;
padding-left:10px;
padding-right:10px;
}

#newsidebar-wrapper ul{padding:0; margin:0; color:#333}

#newsidebar-wrapper ul li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') no-repeat; list-style-type:none; margin:0 0 10px; padding:0 0 10px 20px; border-bottom:1px dashed #CCCCCC; }

#newsidebar-wrapper li{ background:url('http://i792.photobucket.com/albums/yy201/elang-antarnusa_99/folder.jpg') no-repeat; list-style-type: none; margin: 0 0 10px; padding-left: 20px; }

#newsidebar-wrapper ul li a:hover {
background: #B1ACB1;}

Keterangan kode :
width untuk ukuran lebar sidebar
float untuk letak sidebar
padding untuk jarak sidebar
border untuk garis
tulisan bewarna orange mudah adalah update yang telah saya tambahkan untuk variasi icon

6. Cari kode (Fokus yang bewarna merah)

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

    titikk-titik adalah lanjutan kodenya. Tidak begitu penting

7. Copy paste kode dibawah ini tepat diatas kode <div id='main-wrapper'>

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

8. Save Templates. Lihat hasilnya. Akan muncul tambahan Widget bila dilihat di Tata Letak>>Elemen Laman

Bagi yang pertama kali mengikuti trick ini, untuk tulisan bewarna orange mudah diabaikan
Lihatlah perbedaannya, he,,,
Hasilnya akan seperti ini:

Blog sebelum divariasi