February 2, 2015

Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan

February 2, 2015

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(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!

 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!

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

19 comments on Cara Menambah Dua Kolom Widget di Bawah Posting Halaman Depan

  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
  12. Izin di Praktekan Om....
    HaturNuhun for Your Tutorial sebelumnya

    ReplyDelete
  13. Izin untuk pakai mas dan terimakasih mas.

    ReplyDelete

Contact Form

Name

Email *

Message *