Menyembunyikan Sidebar Pada Homepage - Minima Today #5

Banyak sekali yang bertanya tentang widget related posts di blog ini. Widget berwarna hijau yang hanya tampil pada halaman postingan. Sebenarnya itu mudah sekali dibuat. Template ini saya ubah menjadi 3 kolom satu kolom saya sembunyikan di halaman depan.

Secara berurutan template ini terdiri dari main-wrapper, sidebar1 dan sidebar2. Gadget related posts (baca: Membuat Related Posts di Sidebar) saya letakkan di sidebar tengah dan sidebar tengah hanya ditampilkan pada halaman postingan.

Menyembunyikan Sidebar di Halaman Depan
Seperti biasa, mari kita gunakan contoh template Minima. Pada percobaan lalau kita telah menambahakan satu sidebar baru pada tempalte (baca: Menambah Kolom Sidebar Pada Template), sekarang kita akan menyembunyikannya. Yang akan kita sembunyikan adalah sidebar tengah (midsidebar-wrapper, kode pada tempalte Anda bisa berbeda.). Sebaiknay Sidebar yang akan dihilangkan di homepage dikosongkan dari widget terlebih dahulu.

- Login blogger
- Rancangan/Design
- Edit HTML
- Centang Expand Template Widget
- Cari kode seperti berikut ini:
 <div id='midsidebar-wrapper'>
        <b:section class='sidebar' id='midsidebar' preferred='yes'>
</b:section>
 </div>

Yang berwarna merah, menandakan sidebar yang akan dihilangkan. Apit kode tersebut dengan kode penampilan hanya dihalaman postingan, sehingga menjadi seperti berikut ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='midsidebar-wrapper'>
        <b:section class='sidebar' id='midsidebar' preferred='yes'>
</b:section>
 </div>
</b:if>

- Simpan template Anda.
Langkah pertama selesai, karena Anda telah berhasil menyembunyikan sidebar di homepage.

Melebarkan Area Postingan di Homepage
Karena satu sidebar dihomepage dihilangkan, maka akan terjadi area kosong bekas sidebar tersebut. Mari kita penuhi area kosong tersebut dengan melebarkan area postingan khusus di homepage.

Tambahkan kode berikut ini di atas </head>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    #main-wrapper{
width: 710px;
    }
    </style>
    </b:if>

Pada width sesuaikan dengan kondisi lebar template Anda (formatnya: lebarmainwrapper asli + lebarsidebar yang dihilangkan). Jika sudah silahkan simpan template Anda. Sekarang perhatikan bagian elemen halaman Anda, area kosong telah hilang. Area postingan bertamabah lebar.


Menambahkan Gadget Pada Sidebar Yang di Sembunyikan
Kita sudah berhasil menyembunyikan sidebar pada homepage dan membuat area postingannya bertambah lebar. Perhatikan gambar di atas. Namun, bagaimana cara kita menambahkan gadget ke sidebar yang dihilangkan sedangkan kolom untuk penambahan di elemen halaman hilang? Mari kita tambahkan melalui edit HTML. (mungkin inigin anda baca juga: Pindah Gadget Manual Jika Terjadi Galat)

Pertama, Tambahkan Gadget Ke Sidebar Lain yang masih tampak. Jika Anda menggunakn dua sidebar. Yang satu disembunyikan dan yang satu tidak. Kita bisa menggunakan bntuan sidebar yang tidak disembunyikan. Tambahkan gadget seperti biasa. Kita coba dengan menambahkan widget HTML/JavaScript. Dam misalnya kita beri nama gadget tersebut dengan gadget contoh.


Kedua, Pindahkan Gadget tersebut ke sidebar yang disembunyikan.
- Login blogger
- Design/Rancangan
- Edit HTML, centang expand template widget .
- Cari kode gadget contoh untuk menemukan keseluruhan kode gadget yang ingin kita pindah.
Jika sudah ketemu, silahkan pindahkan ke section sidebar lain Anda seperti gambar berikut ini:


Pastikan kode ditutup dengan benar, karena sidebar kosong kadang tidak akan memiliki penutup </b:section> Tambahkan jika tidak ada, sehingga seperti gambar di atas. Semoga bermanfaat...

Komentar

  1. Pertmax dulu kayak ya aku cobah dulu ya makasi atas info ya :)

    salam dari akbar

    BalasHapus
  2. Pertamax......
    Sip mas ,blog ane udah kaya gini ,
    tulisannya jg jelas ...
    aman ,mantap...
    salut atas perjuangannya dalam menulis buat pengunjung...

    BalasHapus
  3. thx mas doy, info yg bermanfaat. . .

    BalasHapus
  4. wah mantab bgt nich mas dayat.... bagus banget.... saluuuuuutttttttt

    BalasHapus
  5. hayo siapa yg mau coba, langsung d coba aja deh, kalau blog q kan templatenya 2 kolom

    BalasHapus
  6. bagus banget mas doyok..
    perlu di coba nich..

    BalasHapus
  7. ok. langsung dicoba nih. tx infony

    BalasHapus
  8. Ohh begitu mas ini yang aku cari keren mas

    BalasHapus
  9. sip Kang... dapet ilmu tambahan dari sini, TQ

    BalasHapus
  10. waahh saya sangat makasih mas doy soalnya
    sempat bingung buat yang gituan

    BalasHapus
  11. Dicoba - dicoba mas doy ^_^

    BalasHapus
  12. @aditx
    semoga berhasil saja ya :D

    BalasHapus
  13. @fadel
    daripada dioyak oyak terus sama kamu
    tak post aja akhirnya :D

    BalasHapus
  14. @la damar
    sembunyi apanya kang hahaha :D

    BalasHapus
  15. @ka damar
    sembunyi apanya kang hahaha :D

    BalasHapus
  16. @bankmoel
    makasih ya kunjungannya :D

    BalasHapus
  17. @ularsawah
    semoga aja bermanfaat ya :D

    BalasHapus
  18. @akbar y
    silahkan dicoba
    semoga bermanfaat

    BalasHapus
  19. tutorial yang bagus.... saya pakai template yg sudah jadi saja :))

    BalasHapus
  20. mas kalo pengen nambahin gadget di tengah atas gimana mas ?? seperti gambar di atas yang ada tulisannya "tambah gadget" ( elemen atas tengah di bawah header) itu bisa di tambahin sendiri g mas ?? ato bawaan dari template >>>?? kalo bisa di tambahin sendiri gimna mas caranya ?? mohon bantuannya . , ,

    trims sebelumnya mas !!

    BalasHapus
  21. koq gak bisa yah?! bagian yang mau dikosongkan gak gagal.. tetep tampil gadget'y..

    BalasHapus
  22. caranya agar sidebar hanya tampil di homepage gmn ya...???

    BalasHapus
  23. mas kalo caranya sidebar sembunyiin di halaman postingan gmna?

    BalasHapus
  24. @herlan
    tinggal diganti aja kode bifnya
    coba utk codenya search di
    http://www.masdoyok.co.cc/2010/03/tutorial-penampilan-widget-pada-halaman.html

    BalasHapus
  25. artikel ini sangat menarik sekali. Tapi saya tidak tertarik untuk membuat yang seperti ini. Saya justru mau yang sebaliknya: halaman depan 3 kolom, halaman berikutnya 2 kolom. Bagaimana caranya bikin seperti itu??????

    BalasHapus
  26. mas saya juga ingin menanyakan sperti yang ditanyakan Iroee.,gmana ya caranya??mohon liat blog saya.,

    BalasHapus
  27. cond='data:blog.pageType == "item"'

    pad kode seperti itu berarti css diaplikasikan untuk halaman postingan

    misalkan anda tempatkan kode itu utk sidebar, dan diberi css display:none, maka sidebar tersebut tidak akan tampil di halaman postingan

    kalau mau sebaliknya, agar idak tampil di selain halaman postingan, tinggal ganti == menjadi !=

    BalasHapus
  28. Ane juga sudah mencobanya. tapi ndak banyak banyak sidebar yg disembunyikan.

    BalasHapus
  29. Sidebarnya akan sembunyi selamanya atau ketika klik artikel dia akan muncul otomatis? butuh pencerahan gan

    BalasHapus

Posting Komentar

Postingan Populer