Berbagi cerita

Browse Manual » Wiring » dibawah » dua » elemen » menambah » sidebar » Menambah Elemen Dibawah Dua Sidebar

---

Menambah Elemen Dibawah Dua Sidebar

Sebelumnya saya pernah posting cara menambahkan elemen (dua kolom tambah gadget) dibawah sebuah sidebar utama.
 
Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:


Menambah elemen di bawah dua 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. Silahkan diganti dulu nilai width 220px; dan properti float: $startSide; dengan nilai lebar sidebar yang anda rencanakan. Misalnya width: 350px dan properti menjadi float: right; Jadinya 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. Jika anda telah membuat dua sidebar di bawah sidebar utama seperti pada tutorial yang sebelumnya, silahkan tambahkan hanya kode yang berwarna hijau saja.
   

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

   Sehingga kodenya akan 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;
   }
   #bottom-col {
   width:170px;
   float:right;
   word-wrap:break-word;
   overflow:hidden;
   }

8. Sekarang buat kode HTML untuk bottom sidebar yang dinamai sebagai "bottom-col" tersebut. Carilah kode 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>

9. Sisipkan kode berikut di bawah kode tadi :
   <b:section class=sidebar id=bottom-col preferred=yes/>
10. 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/>
    <b:section class=sidebar id=bottom-col preferred=yes/>
    </div>

11. Sekarang klik tombol SIMPAN TEMPLATE
12. Selesai

Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil!