earth

Guestbook

/* Iklan google ads */
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:
  • 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 (&quot;widget-spoiler1&quot;)' 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.....
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    16 komentar

    Meskipun gak berani otak atik...tapi aku ijin copy ya Kang.
    makasih untuk infonya

    13 Juni 2011 pukul 14.53  

    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

    14 Juni 2011 pukul 03.49  

    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 ?????

    14 Juni 2011 pukul 04.46  

    Wah kang enes uda eksis lagi nih :-D

    14 Juni 2011 pukul 14.02  

    gak bisa komen, pembahasannya terlau tinggi.

    14 Juni 2011 pukul 21.39  

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

    14 Juni 2011 pukul 22.35  

    malam mas... kabarku baik... gimana dengan mas? maaf sudah lama nggak mampir ke sini...

    14 Juni 2011 pukul 22.48  

    wah ribet amat ya kang...
    @_@
    susah jadinya.. hahhahah

    salam kenal... blogger sukabumi juga ya
    :D
    http://aabelkarimi.blogspot.com/

    15 Juni 2011 pukul 19.45  

    widget-spoiler1 dst
    tue di ganti judul title???

    h2 class='title'></h2
    tue kode html widgetnya gitu kang???

    masih binun kang

    15 Juli 2011 pukul 19.58  

    wow ikutan copas aaaaaaaaaaaah

    22 Agustus 2011 pukul 12.55  

    sudah dijoba dak jadi mass?solusinya

    17 April 2012 pukul 09.02  

    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 :)

    8 Maret 2013 pukul 21.07  

    Gan ga dikasih contohnya apa nih,apa saya yan tak lihat yah.....biar mantep gitu.....

    3 Maret 2014 pukul 04.21  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler