Tips ini CB share setelah dipraktikkan alias dipasang dan sukses di halaman depan, seperti penampakan di bawah ini. Bisa dilihat contoh atau live demonya di CB Net.
Ini dia caranya, 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/AVvXsEhDpVpOHAulMt-eOWmD74XWF3vGq4KYXBjdlhcRzDkj6YbK1DivYVGBJHJHi_oBhwnNXD5eN21HvKr8_g-Gp1qsNCxB-qQ_lvW-l8ZiU6YXakW1Laz7wSJbjepTtTWIqoUEGONOUSX5TYc/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/AVvXsEhDpVpOHAulMt-eOWmD74XWF3vGq4KYXBjdlhcRzDkj6YbK1DivYVGBJHJHi_oBhwnNXD5eN21HvKr8_g-Gp1qsNCxB-qQ_lvW-l8ZiU6YXakW1Laz7wSJbjepTtTWIqoUEGONOUSX5TYc/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;}
.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/AVvXsEhDpVpOHAulMt-eOWmD74XWF3vGq4KYXBjdlhcRzDkj6YbK1DivYVGBJHJHi_oBhwnNXD5eN21HvKr8_g-Gp1qsNCxB-qQ_lvW-l8ZiU6YXakW1Laz7wSJbjepTtTWIqoUEGONOUSX5TYc/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/AVvXsEhDpVpOHAulMt-eOWmD74XWF3vGq4KYXBjdlhcRzDkj6YbK1DivYVGBJHJHi_oBhwnNXD5eN21HvKr8_g-Gp1qsNCxB-qQ_lvW-l8ZiU6YXakW1Laz7wSJbjepTtTWIqoUEGONOUSX5TYc/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>
<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>
<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. Kalo CB mengisinya dengan daftar posting terbaru kategori tertentu, yakni Desain Blog dan Tips SEO.
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'>.
Anda juga bisa mengikuti tips serupa versi maskolis di sini: Menambah Kolom Diatas dan Dibawah Postingan Blog. Good Luck!
Demikian artikel tentang Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan ini dapat kami sampaikan, semoga artikel atau info tentang Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
