Cara Menambah 2 Kolom Di Bawah Sidebar Blog - Pada postingan sebelumnya pernah saya share cara membagi elemen sidebar menjadi 2 kolom, nah posting kali ini tutorial blog masih di seputar sidebar blog yakni dua kolom akan diletakkan atau ditambahkan pada sidebar utama. Lihat screenshotnya dibawah ini yang nantinya akan diterapkan pada pembahasan ini. Bagaimana cara membuat 2 kolom terletak di bawah sidebar, simak jangan sampai ada yang terlewatkan.
Dengan gambar diatas pasti anda sudah tahu maksud tutorial tersebut, ok kita mulai saja ke topik pembahasan mengenai cara menambah 2 elemen dibawah sidebar blogspot.
Menambah dua elemen / kolom di bawah sidebar blog1. Login ke blogger
2. Pilih Templates => Edit HTML
3. Untuk jaga-jaga kalau terjadi kesalahan sebaiknya Backup dulu template anda dengan cara Download Template Lengkap
4. Ceklis kotak kecil dekat Expand Template Widget
5. Tekan F3 untuk mencari kode yang mirip dengan kode dibawah ini, fokuskan pada kode
#sidebar-wrapper #sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}
6. Lalu tambahkan kode berikut ini dibawahnya :
#left-col{width:130px;float:left;word-wrap:break-word;overflow:hidden}
#right-col{width:174px;float:right;word-wrap:break-word;overflow:hidden}
7. Sehingga penerapannya akan seperti berikut ini :
#sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}
#left-col{width:130px;float:left;word-wrap:break-word;overflow:hidden}
#right-col{width:174px;float:right;word-wrap:break-word;overflow:hidden}
8. Simpan dulu template anda.
9. Selanjutnya hilangkan tanda ceklis pada Expand Template Widget dan tekan F3 untuk mencari kode seperti ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
.................
.................
</b:section>
</div>
10. Lalu letakkan kode berikut sesudah kode
</b:section><b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
11. Sehingga penerapannya menjadi seperti ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
.................
.................
</b:section><b:section class='sidebar' id='left-col' preferred='yes'/>
<b:section class='sidebar' id='right-col' preferred='yes'/>
</div>12. Selesai, simpan template dan sekarang lihat hasilnya di Tata Letak. Jika berhasil maka 2 kolom sidebar yang ditambahkan terlihat seperti gambar diatas.
Selamat mencoba tutorial blog tentang
cara menambah 2 kolom di bawah sidebar blog, semoga berhasil.
Title : Cara Menambah 2 Kolom Di Bawah Sidebar Blog
Description : Cara Menambah 2 Kolom Di Bawah Sidebar Blog - Pada postingan sebelumnya pernah saya share cara membagi elemen sidebar menjadi 2 kolom, nah...