Cara Membuat Kolom di Bawah Home Page, Atas atau di Bawah Post Body

Sobat. Salah satu tampilan "unik" dan kere dari SL Wuss series adalah adanya "dua kolom" di bawah home page (posting artikel). Keberadaan du akolom tersebut selain menambah "keren" dari segi desain, juga menjadikan blog kita semakin "user friendly.

Kenapa demikian?

Keberadaan dari sebuah kolom tersebut sebenarnya tidak hanya asal saja. Namun tujuan utamanya adalah membangun sebuah link eksternal atau internal (yang setahu saya) hal itu juga menjadi faktor pembaca dari mesin pencari. 

So, langsung saja berikut penampakan dan life demonya.

Demo 1 | Demo 2 | Demo 3

Sebelum melangkah pada uraian utama pada topik ini, bahasan saya awali dari pemahaman dasar berikut ini.

1# Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body
Caranya sebagai berikut:
1. Masuk akun blogger
2. Pilih Template > Edit HTML
3. Cari kode (Ctrl + F) kode ]]></b:skin>
4. Copy + Paste kode di bawah ini di atas kode  ]]></b:skin>:

#Spicy Column h2{font-size:13px;font-weight:bold;color:#B8002E;border-bottom:2px solid #000000;padding-left:5px;}#Spicy Column{width:600px; /*Change width */}#Spiceleft{width:295px; /*width of the left column*/float:left;margin:4px;}#Spiceright{width:295px; /*width of the right column*/float:right;margin:4px;}

Save Template! 

a# Menambah 2 Kolom di Atas Post Body:
1. Cari (Ctrl + F) kode <div id='main-wrapper'> 
2. Copy + Paste kode berikut ini di atas kode <div id='main-wrapper'>

<div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div>

3. Save!
4. Klik "Layout" dan Tekan F5 (Refresh) untuk melihat ada dua kolom baru di atas Blog Posts.

b# Menambah 2 kolom di Bawah Post Body:
1. Cari (Ctrl + F) kode 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>

2. Tambahkan kode berikut ini sebelum kode setelah kode </b:section> atau sebelum </div>

<div id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div>

Hasilnya akan seperti 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 id='Spicy Column'><b:section class='Spiceleft' id='Spiceleft'/><b:section class='Spiceright' id='Spiceright'/></div></div>

3. Save Template!
Untuk mengetahui perubahannya, silakan klik Tata letak (lauout). Selanjutnya sobat bisa langsung menambahkan widget seperlunya saja.

So, selanjutnya, kita bahas topik utama artikel ini.

3# Menambah Dua Kolom di Bawah Home Page (Halaman Utama) Blog

Langkahnya juga tidak jauh berbeda dengan cara sebelumnya, yakni:

1. Masuk akun blogger

2. Pilih template > Edit HTML

3. Cari kode Cari kode (Ctrl + F) kode ]]></b:skin>

4. Copy + Paste kode di bawah 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/AVvXsEjmKGqJrKfUcVtBwtxaC5nVeAFNcphntyKZMsRoRCamXYMoiRECx65CxmJDTigTc-I05iS2oeGSKLYwID0o8r2tFj7gnaCUdQE74HgR062H6ycVsmvuQVoirvQfGnkirOZNgDvGQR1HsKc/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/AVvXsEjmKGqJrKfUcVtBwtxaC5nVeAFNcphntyKZMsRoRCamXYMoiRECx65CxmJDTigTc-I05iS2oeGSKLYwID0o8r2tFj7gnaCUdQE74HgR062H6ycVsmvuQVoirvQfGnkirOZNgDvGQR1HsKc/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;}

***. Note:
- Warna biru menunjukkan lebar kolom widget, maka sesuaikan dengan lebar halaman konten
- Jika ingin membuat tiga kolom, silakan tambahkan kode yang sama persis di atas  ]]></b:skin>
dan mengikuti langkah ke-5 dan 6 sampai selesai (menambahkan kode sama persis pada langkah 5 dan 6).

5. 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>

6. 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> 

Di dalam kode templatenya kurang lebih seperti ini:

7. Save template
8. Silakan cek di tata letak (layout) untuk mengetahui hasilnya.

Mudah bukan?

Jika masih ada hal yang perlu didiskusikan, jangan malu-malu untuk meninggalkan pesan di kolom komentar njeh.

Salam blogger.
Sumber:
(http://forumblogindo.blogspot.com)
http://contohblognih.blogspot.com/2015/02/menambah-dua-kolom-widget-di-bawah-blog-posts.html