Menambah Elemen Di Bawah Sidebar

Masih tentang menambah elemen. Biar ga tanggung maksudnya . Berikutnya adalah menambah elemen di bawah sidebar. Masih betah dengan desain template blogger kan. Oke, saya harap masih. Saya akan tambahkan dua kolom elemen sidebar di bawah sidebar utama. Artinya, dua kolom sidebar tersebut masih merupakan bagian dari sidebar-wrapper.


Berbeda dengan posting terdahulu menambah elemen sidebar blog yang menjadikan sidebar utama terbagi dua. Nah, yang ini sangat unik. Jika tertarik, temukan perbedaannya antara tutorial yang itu dengan tutorial yang sedang anda baca sekarang ini. Seperti biasa, acuan tetap pada template Minima White, perbedaan kode CSS pada template pasti ada namun tidak banyak. Silahkan menyesuaikan dengan desain template anda.

Menambah elemen di bawah sidebar

1. Login ke blogger dengan id anda
2. Masuk ke menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Sekarang cari kode ini :

   #sidebar-wrapper {
   width: 220px;
   float: $startSide;
   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 */
   }

6. Ganti nilai width 220px; dan properti float: $startSide; dengan nilai sidebar anda. Misalnya width: 350px dan properti menjadi float: right; sehingga secara keseluruhan menjadi seperti ini :

   #sidebar-wrapper {
   width: 350px;
   float: right;
   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 */
   }

7. Sekarang tambahkan kode berikut di bawah kode tadi

   #left-col {
   width:170px;
   float:left;
   word-wrap:break-word;
   overflow:hidden;
   }
   #right-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

   Secara keseluruhan kodenya menjadi seperti ini :

   #sidebar-wrapper {
   width: 350px;
   float: right;
   $startSide
   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 */
   }
   #left-col {
   width:170px;
   float:left;
   word-wrap:break-word;
   overflow:hidden;
   }
   #right-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

8. Sekarang kita akan membuat id untuk sidebar left-col dan right-col tersebut. Cari kode ini:

   <div id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'/>
   <b:widget id= dan seterusnya....
   </div>

9. Sisipkan kode berikut di bawah <b:widget id= dan seterusnya.... :

   <b:section class='sidebar' id='left-col' preferred='yes'/>
   <b:section class='sidebar' id='right-col' preferred='yes'/>

   Sehingga secara keseluruhan menjadi seperti ini:

   <div id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'/>
   <b:widget id= dan seterusnya....
   <b:section class='sidebar' id='left-col' preferred='yes'/>
   <b:section class='sidebar' id='right-col' preferred='yes'/>
   </div>

10. Sekarang klik tombol SIMPAN TEMPLATE
11. Selesai

Silahkan masuk ke Tata Letak lalu klik Elemen Halaman. Maka di sana sudah ditambahkan dua kolom elemen sidebar di bawah sidebar utama. Silahkan elemen baru tersebut mau diisi apa saja. Kalau saya, diisi dengan categories dan link ke artikel yang saya pikir layak untuk dibaca atau good articles. Oke, selamat mencoba.

Source: bangdel.blogspot.com