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 == "item"'>
<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 != "item"'>
<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...
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 == "item"'>
<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 != "item"'>
<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...
Pertmax dulu kayak ya aku cobah dulu ya makasi atas info ya :)
BalasHapussalam dari akbar
Pertamax......
BalasHapusSip mas ,blog ane udah kaya gini ,
tulisannya jg jelas ...
aman ,mantap...
salut atas perjuangannya dalam menulis buat pengunjung...
thx mas doy, info yg bermanfaat. . .
BalasHapuswah mantab bgt nich mas dayat.... bagus banget.... saluuuuuutttttttt
BalasHapushayo siapa yg mau coba, langsung d coba aja deh, kalau blog q kan templatenya 2 kolom
BalasHapusbagus banget mas doyok..
BalasHapusperlu di coba nich..
ok. langsung dicoba nih. tx infony
BalasHapussaya lagi belajar desain nih kang :)
BalasHapusOhh begitu mas ini yang aku cari keren mas
BalasHapussip Kang... dapet ilmu tambahan dari sini, TQ
BalasHapuswaahh saya sangat makasih mas doy soalnya
BalasHapussempat bingung buat yang gituan
Dicoba - dicoba mas doy ^_^
BalasHapus@aditx
BalasHapussemoga berhasil saja ya :D
@fadel
BalasHapusdaripada dioyak oyak terus sama kamu
tak post aja akhirnya :D
@la damar
BalasHapussembunyi apanya kang hahaha :D
@ka damar
BalasHapussembunyi apanya kang hahaha :D
@bankmoel
BalasHapusmakasih ya kunjungannya :D
@ularsawah
BalasHapussemoga aja bermanfaat ya :D
@akbar y
BalasHapussilahkan dicoba
semoga bermanfaat
tutorial yang bagus.... saya pakai template yg sudah jadi saja :))
BalasHapusmas 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 . , ,
BalasHapustrims sebelumnya mas !!
koq gak bisa yah?! bagian yang mau dikosongkan gak gagal.. tetep tampil gadget'y..
BalasHapuscaranya agar sidebar hanya tampil di homepage gmn ya...???
BalasHapusInidia (?)
BalasHapusmas kalo caranya sidebar sembunyiin di halaman postingan gmna?
BalasHapus@herlan
BalasHapustinggal diganti aja kode bifnya
coba utk codenya search di
http://www.masdoyok.co.cc/2010/03/tutorial-penampilan-widget-pada-halaman.html
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??????
BalasHapusmas saya juga ingin menanyakan sperti yang ditanyakan Iroee.,gmana ya caranya??mohon liat blog saya.,
BalasHapuscond='data:blog.pageType == "item"'
BalasHapuspad 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 !=
Ane juga sudah mencobanya. tapi ndak banyak banyak sidebar yg disembunyikan.
BalasHapusSidebarnya akan sembunyi selamanya atau ketika klik artikel dia akan muncul otomatis? butuh pencerahan gan
BalasHapus