Cara Menambah Kolom Diatas dan Dibawah Postingan Blog

Cara Menambah Kolom Diatas dan Dibawah Postingan Blog - Membuat / menambah ruang kolom atau elemen baru dan posisinya berada dibawah dan diatas post blog tidaklah terlalu sulit. yang penting anda tahu berapa lebar tempat postingan blog (main-wrapper) dan mengatur / membagi ukuran lebar dua kolom baru yang akan ditambahkan. Bagaimana cara membuat 2 (dua) kolom baru terletak diatas dan dibawah postingan blog? Sebelum tutorial blog ini dimulai mungkin anda berkenan melihat cara menambah 2 kolom dibawah sidebar blog. Nah anda dapat melihat screenshot untuk menambah 2 kolom dibawah posts blog, seperti terlihat dibawah ini.

Dengan membuat / menambah kolom dibawah postingan blog, tampilan blog anda akan semakin ramai karena anda dapat menambah ruangan misalnya untuk meletakkan widget random post, iklan banner dan widget lainnya sesuai keinginan anda. Kita mulai saja ke pembahasan bagaimana cara membuat 2 kolom dibawah dan diatas postingan blog.

Menambah Kolom Diatas dan Dibawah Postingan Blog
1. Log In ke bloggger.com
2. Pada dashboard, pilih Template => Edit HTML
3. Centang Expand Widget Template
4. Tekan F3, cari kode yang mirip seperti berikut ini (pusatkan pencarian pada kode main-wrapper)

#main-wrapper{padding-left:10px;width:590px;float:$startSide;word-wrap:break-word;overflow:hidden}

5. Lalu tambahkan kode berikut 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}

Sehingga menjadi 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}

Keterangan :
-  Angka warna merah adalah lebar dari tempat blog posts (main-wrapper)
- Angka warna biru adalah lebar dari kolom yang baru ditambakan

6. Simpan Template

7. Lalu hilangkan tanda centang pada Expand Widget Template dan 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>

A. Untuk menambah dua kolom dibawah blog posts maka tambah berwarna hijau dibawah ini dan letakkan diatas kode </div>

<b:section class='post-kiri' id='post-kiri' preferred='yes'>
<b:section class='post-kanan' id='post-kanan' preferred='yes'>

Sehingga 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>

B. Untuk menambah dua kolom diatas blog posts maka tambah berwarna hijau dibawah ini dan letakkan 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'>

Sehingga 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>

8. Selesai, simpan template

Catatan :

Mungkin kode didalam template anda berbeda, jadi sesuiakan saja dan caranya sama dengan diatas dan juga lihat lebar post blog anda. Atur juga mengenai lebar dari 2 kolom yang baru ditambahkan, misalnya width, padding dan margin.

 

Demikian tutorial blog mengenai Cara Menambah Kolom Diatas dan Dibawah Postingan Blog, semoga bermanfaat.