Menambah Elemen Dibawah Dua Sidebar

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1zoteokc-iYtHzsDBimcD16mZwtMvxLki9nQ_THpxsXlXjjsX-hLcGQnszCuw0ZftW-F5XIjQVgbSQE4r_45O7q4OkXm-S7TC98ETR0WjkML6aMvErKBJ0Nf4a511cnfAE1W74YYjeIE/s1600-h/image%5B16%5D.png
 (Click Untuk Buka Gambar)
Postingan kali ini trik menambah elemen halaman dibawah dua kolom atau sidebar yang telah saya buat kemarin.
Seperti gambar dibawah ini:
 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCl9BhJHu4zCMDxXp6sS7CsV4BJBFRJWW_7GDK7qIGlK7_f6nbjsbhVVvEDzzNrhSaFRdjFcsVp2w5snPpuy-ybxK_UCnehHVNPFfC-tkRiXzGAgHOXbbevtTSjrAj4YSJGVjABS5E9-E/s1600-h/image%5B15%5D.png
(Click Untuk Buka Gambar)


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!


Sumber