Home » » Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan

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!

Thanks for reading & sharing Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan

Previous
« Prev Post

17 comments:

Comment Page:
  1. klo cara ngasih widget kya gtu gmna gan :3 ksh scriptnya dong

    ReplyDelete
  2. terimaksih atas petunjuk nya

    ReplyDelete
  3. kok di template saya tidak ketemu kode ini mas

    main wrappernya mas?

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  10. Kang, script widgetnya gimana?

    ReplyDelete
    Replies
    1. gak ada kode khusus... itu pake widget bawaan blogger biasa...

      Delete
  11. 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.

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox