Menambah Elemen Di Bawah Dua Sidebar

Posting ini hanya untuk melengkapi desain template menambah sidebar di bawah dua sidebar blogger. Sungguh kalimat yang sangat membingungkan bukan? Saya saja bingung koq. Agar lebih mudah, silahkan baca postingan menambah elemen di bawah sidebar. Di sana dijelaskan bagaimana kita dapat menambah dua elemen sidebar di bawah sidebar utama.


Jadi sekarang kita akan menambahkan satu elemen lagi di bawah kedua sidebar tersebut. Mungkin sudah mulai jelas ya. Oke, sekarang masuk ke utak-atik template. Biasanya saya pakai Minima White sebagai acuan.

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:170px;
   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 membuat id 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

Mari kita uji hasilnya dengan masuk ke Tata Letak lalu klik Elemen Halaman. Saya harap sudah ada elemen sidebar baru di bawah dua elemen sidebar kiri dan kanan seperti ditunjukkan oleh gambar di atas. Oke, selamat mencoba.

Related Post:

Template Design

• Membagi Header Menjadi Dua Kolom
• Menambah Tiga Kolom Elemen Di Bawah Header
• Menambah Elemen Di Atas Footer
• Menambah Elemen Di Bawah Sidebar
• Menambah Elemen Di Bawah Posting Update
• Menambah Elemen di Atas Bawah Posting Blog
• Menambah Elemen Sidebar Blogspot

or or