Cara Menambah Dua Kolom di Bawah Posting Blog Halaman Depan

Baca Juga

Cara membuat atau menambah dua kolom widget di bawah posting halaman depan blog.

SEBELUM ke cara membuatnya, berikut ini gambar penampakan contoh dua kolom widget di bawah postingan blog di halaman depan (homepage).

Dua kolom di bawah posting blog ini cocok bagi blog berita atau blog dengan banyak kategori dan mau menampilkan tulisan terbaru di label unggulan.

Cara Menambah Dua Kolom di Bawah Posting Blog Halaman Depan

Tips berikut ini khususnya untuk para pengguna template Johny Wuss Series.

1. Template > Edit HTML
2. Copy + Paste kode berikut ini di atas kode  ]]</b:skin>

#post-kiri{padding-left: 5px;width: 290px;float: left;word-wrap: break-word;overflow: hidden;margin:0 8px 15px 8px;}
.post-kiri a, post-kanan a {color:#555;font-size:13px}
.post-kiri ul {list-style: none;color: #EAE9E8;margin: 0;padding: 0;}
.post-kiri li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KZht0qo2gEVUG6WUsY35xGiPPmT4bz90AboT6y0qnS9OX4uD_YcovaGaLkAXNuigYr__iAHQpWSbfGV5fuAwTR0AY9AgwH1lFMiVAB6AcaTC3sjCWuqLAPcCNI-YpnTAjl_RF4-vN2c/s1600/bullet-list.gif) no-repeat 0 10px;text-indent: 0;line-height: 1.2em;border-bottom: 1px dotted #ddd;margin: 0;padding: 3px 0 3px 12px;}
.post-kiri h2 {font-size: 15px;font-family: Oswald;}

#post-kanan{padding-left: 5px;width: 290px;float: left;word-wrap: break-word;overflow: hidden;margin:0 8px 15px 8px;}
.post-kanan a, post-kanan a {color:#555;font-size:13px}
.post-kanan ul {list-style: none;color: #EAE9E8;margin: 0;padding: 0;}
.post-kanan li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KZht0qo2gEVUG6WUsY35xGiPPmT4bz90AboT6y0qnS9OX4uD_YcovaGaLkAXNuigYr__iAHQpWSbfGV5fuAwTR0AY9AgwH1lFMiVAB6AcaTC3sjCWuqLAPcCNI-YpnTAjl_RF4-vN2c/s1600/bullet-list.gif) no-repeat 0 10px;text-indent: 0;line-height: 1.2em;border-bottom: 1px dotted #ddd;margin: 0;padding: 3px 0 3px 12px;}
.post-kanan h2 {font-size: 15px;font-family: Oswald;}

3. Cari (Ctrl+F) kode <div id='main-wrapper'> dan Anda akan menemukan kode seperti di bawah 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>

4. Copas kode berikut ini di bawah kode </b:section> atau sebelum kode </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
                        <b:section class='post-kiri' id='post-kiri' preferred='yes'/>
                        <b:section class='post-kanan' id='post-kanan' preferred='yes'/>
                        </b:if>

Hasilnya seperti ini. Perhatikan kode yang di-highlight kuning!

5. Save Template!

Setelah itu, menuju "Layout". Maka akan muncul dua kolom widget baru di bawah Blog Posts seperti penampakan berikut ini.

Jika belum muncul, Refresh Page!

Anda bisa mengisinya dengan Widget apa saja, misalnya posting terbaru kategori tertentu, yakni Desain Blog dan Tips SEO.

Caranya: Layout > Add a Widget > Feed > masukkan URL alamat blog Anda > ganti tulisan default dengan /-/Label

DUA KOLOM WIDGET DI ATAS POSTINGAN

Bagaimana jika ingin menempatkan dua kolom tersebut di atas Blog Post? Gampang pisan!

Simpan saja kode no. 4 di bawah kode <div id='main-wrapper'>.

=== CARA LAIN ===

Anda juga bisa mengikuti tips serupa versi maskolis berikut ini:

1. Taruh Code CSS dibawah ini di atas kode ]]></b:skin>

/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:600px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Perhatikan code yang berwarna merah di atas. Samakan lebarnya dengan lebar (width) post body atau main-wrapper di blog Anda --biasanya sekitar 600 pixel. 

Untuk mengetahhui lebar post body, cari kode css  seperti di bawah ini :

#main-wrapper {
width: 410px;

2. Cari kode seperti di bawah 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>

3. Untuk menambahkan dua kolom widget di bawah post body halaman depan, maka tambahkan kode berikut ini tepat di bawah kode

<b:section class='main' id='main' showaddelement='no'>

<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>

4. Dan jika ingin menambah dua kolom itu di blog-post, maka simpan kode warna merah itu di atas kode <div id='main-wrapper'>

Hasilnya seperti ini:

Dua kolom dibawah post body:

<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 id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>
</div>

Dua kolom diatas post body:

<div id='main-wrapper'>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>
</div>

5. Save Template!

Berikutnya memasang widget. 

CARA PASANG WIDGET

Klik "Layout", maka di area Page Element akan muncul dua kolom di bawah/di atas post body.  Jika belum muncul, tekan F5 di keyboard untuk refresh/reaload!

Jika kolom kiri dan kanan tidak bisa sejajar, maka atur lebar (width) kolom kiri dan kanan. Atur padding dan marginya.

Jika sudah beres, maka tinggal mengisinya dengan "Add a Gadget"! Untuk menampilkan posting terbaru per kategori/label tertentu:

1. Add a Gadget > pilih "Feed"

2. Masukkan alamat blog Anda di kolo "Feed Url"

3. Klik "Continue"

4. Ubah "Title" (Judul) Widget dengan Nama Label.

5. Klik "Change feed url"

5. Ubah alamat feed yang tadinya 

http://namabloganda.blogspot.com/feeds/posts/default

menjadi

http://namabloganda.blogspot.com/feeds/posts/default-/Label

misalnya: 

http://www.contohblog.com/feeds/posts/default/-/Tips 

http://www.contohblog.com/feeds/posts/default/-/Desain%20Blog

Catatan: tambahkan %20 untuk memisahkan label yang terdiri dari dua kata.

Demikian  Cara Menambah Dua Kolom di Bawah Posting Blog Halaman Depan. Good Luck! (www.contohblog.com).*