Pada postingan sebelumnya anda dapat lihat bagaimana cara menambah 1 kolom dan 2 kolom dibawah sidebar. Untuk tutorial kali ini masih seputar menambah elemen / kolom baru tetapi penambahan kolom akan diletakkan dibawah postingan blog dan diatas postingan blog (blog posts). Untuk menambah kolom baru di posts blog, kita pusatkan ke pencarian kode #main-wrapper yang merupakan tempat kita menulis artikel blog. Sekarang Kita mulai saja ke pembahasan bagaimana cara membuat 2 kolom dibawah dan diatas postingan blog.
Menambah 2 Kolom Dibawah Posts Blog
1. Login ke bloggger
2. Pada dashboard, pilih Template => Edit HTML
3. Tekan Ctrl+F, lalu cari kode yang mirip dibawah ini, biasanya ada diatas
]]></b:skin>#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}
4. Tambahkan kode berikut ini dan letakkan diatasnya
#post-kiri{padding-left:5px;width:290px;float:$startSide;word-wrap:break-word;overflow:hidden}Penerapannya seperti ini
#post-kanan{padding-left:10px;width:285px;float:$startSide;word-wrap:break-word;overflow:hidden}
#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}
#post-kiri{padding-left:5px;width:290px;float:$startSide;word-wrap:break-word;overflow:hidden}
#post-kanan{padding-left:10px;width:285px;float:$startSide;word-wrap:break-word;overflow:hidden}
5. Cari kode seperti dibawah ini
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
6. Copy kode berikut ini dan letakkan dibawah kode
</b:section><b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>
Penerapannya seperti dibawah ini
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>
</div>
7. Simpan template
Apabila dilihat di Tata Letak akan tampil seperti ini
Menambah 2 Kolom Diatas Posts Blog
Caranya sama dengan diatas, perbedaannya hanya kode dibawah ini diletakkan dibawah kode
<div id='main-wrapper'><b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>
Penerapannya seperti dibawah ini
<div id='main-wrapper'>
<b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
Apabila dilihat di Tata Letak akan seperti gambar dibawah ini
Semoga ulasan mengenai cara menambah kolom diatas dan dibawah postingan bermanfaat, happy blogging.
