Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan

POSTING  cara menampilkan atau menambah dua kolom widget di bawah posting halaman depan (home) ini adalah versi lain dari Cara Menambah Dua Kolom Widget di Bawah atau Atas Post Body yang sudah di-share sebelumnya di blog CB ini.

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.

 Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan

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(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/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(http://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/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!

 Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan

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!

 Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan

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!

Labels: Desain Blog
18 Komentar untuk " Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan"

klo cara ngasih widget kya gtu gmna gan :3 ksh scriptnya dong

terimaksih atas petunjuk nya

kok di template saya tidak ketemu kode ini mas

main wrappernya mas?

mas. kok template yang saya gunakan NJW1 kok gak ada main wrapper id nya?

lihat kode no. 3, gak mungkin gak ada main-wrapper!

Beneran tidak ada i mas. Seemalem saya udah buka template downloadan langsung tanpa eddit, dari NJW 1 dan 3, aku cari tidak ada i mas.kettikka aku samakan persis dgn kode selanjutnya ada, namun maain wrapper id nya tidak ada. Gmn mmas?

gimana mas? div id='main-wrapper kode tersebut tidak ada mas

lihat gambar di atas, GAK MUNGKIN gak ada! kalo main-wrapper gak ada, berantakan itu blog!

Iya Mas,, Sama Punya Saya Juga Tidak Ada
Kalau Mau menambahkan Bisa Kan

salam kenal mohon infonya gan.
Saya sudah praktekkan cara seperti agan tapi pada halaman 2 dan seterusnya hasilnya berantakan (pada halaman 2 dan seterusnya widget berantakan) mohon balasannya. terimakasih

gan, tolong share dong cara bikin readmore seperti blog cbnet, thanks before :-)

div id='main-wrapperKode itu tidak ada diblog saya mas.. apa ada kode yang lain selain ini?? buat gantinya mas////

Kang, script widgetnya gimana?

gak ada kode khusus... itu pake widget bawaan blogger biasa...

punya saya juga tidak ada, padahal suda dowload dari cb blog...

Saya ingin berbagi pengalaman terkait ini. Trik di atas digunakan di Blog Saya ternyata berfungsi. Memang betul tidak ada kode div id='main-wrapper di NJW. Caranya begini, copas kode yang nomor 4 di bawah kode ini

var postperpage=6;
var numshowpage=4;
var upPageWord ='« Previous ';
var downPageWord ='Next »';
var urlactivepage=location.href;
var home_page="/";

(disini kode nomor 4)

Untuk melihat hasilnya lihat saja blog saya.

Izin di Praktekan Om....
HaturNuhun for Your Tutorial sebelumnya

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *