Cara Menambah 2 Kolom Diatas dan Dibawah Posts Blog

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}
#post-kanan{padding-left:10px;width:285px;float:$startSide;word-wrap:break-word;overflow:hidden}

Penerapannya seperti ini

#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

Cara Menambah 2 Kolom Diatas dan Dibawah Posts Blog

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.

tutorial blog

Terlintas

Cara Menambah 2 Kolom Diatas dan Dibawah Posts Blog

Related Posts

Entri Populer