Cara Menambah 2 Kolom dibawah Sidebar Blog - Sebelum membahas ulasan mengenai cara membuat 2 (dua) kolom yang terletak di sidebar blog, simak dahulu postingan sebelumnya mengenai cara menambah footer blog multi kolom dan anda juga dapat simak cara menambah 1 kolom, 2 kolom, 3 kolom berada dibawah header blog. Bagaiamana cara membuat / menambah 2 elemen baru yang di bawah sidebar blog? Caranya tidaklah terlalu sulit, anda tinggal ikuti petunjuk yang akan saya sajikan dibawah ini. Kita mulai saja bagaimana cara membuat 2 kolom dibawah sidebar blogspot.
Cara Membuat 2 Kolom dibawah Sidebar Blog
1. Login ke blogger
2. Pada dasbor, pilih Template => Edit HTML
3. Backup dulu template anda
4. Centang Expand Widget Template
5. Tekan F3, cari kode yang mirip seperti dibawah ini
#sidebar-wrapper{width:310px;float:right;word-wrap:break-word;overflow:hidden}
6. Untuk menambah 2 kolom dibawah sidebar, silahkan tambahkan kode seperti berikut dan letakkan 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}
Maka penerapannya seperti dibawah 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}
7. Simpan Template
8. Lalu hilangkan tanda Centang pada Expand Widget Template dan cari kode seperti dibawah ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
</div>
9. Lalu tambahkan kode berikut dibawah kode </b:section>
<b:section class='sidebar' id='left-col' preferred='yes'>
<b:section class='sidebar' id='right-col' preferred='yes'>
Sehingga penerapannya seperti dibawah ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
</b:section>
<b:section class='sidebar' id='left-col' preferred='yes'>
<b:section class='sidebar' id='right-col' preferred='yes'>
</div>
10. Selesai dan Simpan lagi template anda
Nah demikianlah Cara Menambah 2 Kolom dibawah Sidebar Blog, silahkan dicoba dan semoga bermanfaat untuk anda semua, happy blogging.
0 komentar
Berkomentarlah dengan Bahasa yang Relevan dan Sopan.. #ThinkHIGH! ^_^