Beberapa hari lalu ketika menambahkan kolom baru pada blog SMPN 1 Cikembar untuk keperluan form email contact yang dibuat toggle spoiler, seorang rekan kerja menanyakan bagaimana cara membuatnya agar bisa digunakan pada sidebar blog.
Membuat spoiler pada widget sidebar memang dapat mengirit halaman dan dapat membuat blog terlihat atraktif serta menawan. Namun jika cara yang digunakan adalah spoiler jenis pertama, maka akan cukup memakan waktu dan ketelitian karena harus memasukkan kode-kode spoiler pada setiap widget yang akan disembunyikan. Selain itu, spoiler jenis inipun hanya bisa diterapkan pada widget-widget bertipe HTML/JavaScript saja, tidak untuk widget-widget bawaan blogger, seperti profil, bloglist, arsip blog, label, dll.
Berbeda dengan spoiler jenis kedua, selain caranya cukup simpel, juga bisa diterapkan pada widget bertipe apapun karena hanya menambahkan link toggle spoiler pada kode HTML untuk judul widget tersebut dan mengganti kode HTML untuk widget-content-nya.
Untuk lebih jelasnya kamu bisa mengikuti langkah-langkah sebagai berikut:
Nah, sekarang coba kamu klik pada judul widget-widget sidebar kamu, apakah sudah bisa di Show/Hide?
Selain digunakan dengan cara-cara seperti di atas, toggle spoiler inipun dapat digunakan dengan cara berbeda. Sebagai contoh kamu bisa melihat hasilnya pada Artikel Terkait, atau pada menu Contact - Email pada blog SMPN 1 Cikembar.
Segitu aja infonya sob, selamat mencoba.....
Membuat spoiler pada widget sidebar memang dapat mengirit halaman dan dapat membuat blog terlihat atraktif serta menawan. Namun jika cara yang digunakan adalah spoiler jenis pertama, maka akan cukup memakan waktu dan ketelitian karena harus memasukkan kode-kode spoiler pada setiap widget yang akan disembunyikan. Selain itu, spoiler jenis inipun hanya bisa diterapkan pada widget-widget bertipe HTML/JavaScript saja, tidak untuk widget-widget bawaan blogger, seperti profil, bloglist, arsip blog, label, dll.
Berbeda dengan spoiler jenis kedua, selain caranya cukup simpel, juga bisa diterapkan pada widget bertipe apapun karena hanya menambahkan link toggle spoiler pada kode HTML untuk judul widget tersebut dan mengganti kode HTML untuk widget-content-nya.
Untuk lebih jelasnya kamu bisa mengikuti langkah-langkah sebagai berikut:
- Login ke akun Blogger kamu.
- Dari halaman Dasbor, klik Rancangan dan pilih Edit HTML.
- Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
- Beri tanda centrang pada Expand Template Widget.
- Cari kode ]]></b:skin> lalu letakkan kode CSS berikut di atasnya:
/*-----Toggle Spoiler-----*/ .widgethidden {display:none} .widgetshown {display:inline}Bagi yang sudah memakai toggle spoiler pada block komentar-nya, abaikan langkah ini.
- Dan letakkan script berikut di bawah kode ]]></b:skin> tadi:
<script type='text/Javascript'> function togglespoiler (postid){ var whichpost = document.getElementById(postid); if (whichpost.className=="widgetshown"){ whichpost.className="widgethidden"; } else{ whichpost.className="widgetshown"; } } </script>Bagi yang sudah memakai toggle spoiler pada block komentar-nya, abaikan langkah ini.
- Setelah itu carilah kode berikut pada widget-widget yang akan kamu sembunyikan:
<h2 class='title'><data:title/></h2>
- Ganti kode tersebut dengan kode ini:
<a href='javascript:togglespoiler ("widget-spoiler1")' title='Show/Hide Widget'><h2 class='title'><data:title/></h2></a>
- Kemudian pada kode berikut, yang ada di bawahnya:
<div class='widget-content'>
- Ganti dengan kode ini:
<div class='widgethidden' id='widget-spoiler1'> - Simpan hasilnya dan ucapkan alhamdulillah...
Catatan:Untuk widget-widget berikutnya, ganti widget-spoiler1 menjadi widget-spoiler2, widget-spoiler3, dst., baik pada kode HTML untuk judul (title) maupun pada kode widget-content-nya.
Nah, sekarang coba kamu klik pada judul widget-widget sidebar kamu, apakah sudah bisa di Show/Hide?
Selain digunakan dengan cara-cara seperti di atas, toggle spoiler inipun dapat digunakan dengan cara berbeda. Sebagai contoh kamu bisa melihat hasilnya pada Artikel Terkait, atau pada menu Contact - Email pada blog SMPN 1 Cikembar.
Segitu aja infonya sob, selamat mencoba.....
16 komentarPosting Komentar
Meskipun gak berani otak atik...tapi aku ijin copy ya Kang.
makasih untuk infonya
Mantap tutorialnya Kang...
Maaf neh baru ini comment, padahal dah ku follow dan lihat trus perkembangannya.... Tutorial Blog nya dari SC sangat membantu.....
maaf juga neh klo out of topic....
" Apa bener kalo domain co.cc sekarang ga bisa di gunain buat blogger, soalnya semua blog tmn yang pake domai itu server not found semua, aku chek account di co.cc bisa trus coba aku ulangi, eh ternyata ghsgoogle nya dah di block list sama co.cc " Apa ga da cara biar bisa pake doamin co.cc lagi buat blogger...
terima kasih
tips nya mantab kang,.. tapi apakah tips ini (widget yang disembunyikan) menambah berat loading blog karena ada widget yang disembunyikan??? jadi walaupun widget tersebut disembunyikan,.. msih ikut loading ?????
Wah kang enes uda eksis lagi nih :-D
@IbuDini dan Lina:
Makasih mbak... Cobain deh, mantap abis, hehehe...
@Gondrong:
Setahu saya "ngontrak" domain di co.cc cuma setahun sob, jd kalo udah lewat pastinya hangus. Mungkin blog temen-temen sobat sudah habis masa "ngontrak"-nya. Buktinya masih banyak kok domain co.cc yg masih bisa dibuka.
@Rizki:
Yang bikin berat itu isi dlm widget, spt gambar, banner, banner iklan, dan link-link lainnya. Juga script yang disimpan di hosting lain.
Kalo spoilernya sendiri gak berat
@Ikhsan:
Iya sob. Hampir setahun rab, kini ngeblob lagi, hehehe...
gak bisa komen, pembahasannya terlau tinggi.
Mampir lagi ke sini Kang. Bukan buat komentar, tapi ada yang mau ditanyain.
Bisa minta tolong cek situs ini :
http://kerjaonlinecukuponlinediinternet.blogspot.com
Tolong sarannya ya Kang, ini scam, tipu2 atau bisa dicoba (harus bayar 100 rb kalo mau join).
Satu lagi Kang. Saya mau nyoba beli domain yang sudah berPR via auction godaddy.com, tapi saya belum tau cara setting domain hostingnya. Blog saya yang sekarang semuanya masih hosting di blogger.com.
Rencananya sih sewa hosting di godaddy juga atau (maunya sih) free hosting. Senang banget deh kalo Kang Enes bisa buat tutorial cara setting domain hosting di godaddy atau salah satu free hosting yang direkomendasikan.
Maaf banyak nanya...
malam mas... kabarku baik... gimana dengan mas? maaf sudah lama nggak mampir ke sini...
wah ribet amat ya kang...
@_@
susah jadinya.. hahhahah
salam kenal... blogger sukabumi juga ya
:D
http://aabelkarimi.blogspot.com/
@Sabjan:
Ah, suka merendah...
@Lina:
Kalo saya kurang percaya dgn yg begituan mbak, soalnya ada sodara yg kecele ikutan yg begituan. Tp kalo mau nyoba terserah mbak..
Mengenai setting domain di godaddy.com pasti banyak ditulis orang mbak, tinggal search aja di Google.
Sebenarnya sekalipun mbak beli domain dimanapun, tetep aja basiknya blogger. Jadi gak ngaruh, hanya domainnya aja gak subdomain blogspot lagi.
Domain yang free? Kalo ada saya juga mau, mbak. Kebanyakan free trial. Maklum orang juga gak mau rugi, mbak...
@Mas Goen:
Siiip... sudah bisa nongol lagi ke SC mas...
@Aab:
Ribetan cara yang pertama kang... Nu ieu malah lewih praktis.
Salam kenal deui kang
widget-spoiler1 dst
tue di ganti judul title???
h2 class='title'></h2
tue kode html widgetnya gitu kang???
masih binun kang
wow ikutan copas aaaaaaaaaaaah
sudah dijoba dak jadi mass?solusinya
curhat dikit: yang membuat blog saya berat, yaitu link foto profil komentator selalu loading pertama. jadi menghambat tampilan blog terbuka :D
yang tau solusinya, please sharing :)
Gan ga dikasih contohnya apa nih,apa saya yan tak lihat yah.....biar mantep gitu.....
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.