earth

Guestbook

/* Iklan google ads */
Tulisan ini mungkin terbilang basi karena jika kita searching di si Mbah akan muncul beragam tulisan yang memuat masalah ini. Tapi sehubungan ada saja sobat yang menanyakan masalah ini maka saya coba membahasnya, siapa tahu ada di antara sobat yang membutuhkannya juga.

Sepengetahuan saya, spoiler ini ada dua jenis (mungkin ada sobat yang ingin menambahkan/mengoreksi): Pertama, spoiler yang memakai perintah langsung, yaitu dengan menempatkannya di atas teks/image yang akan disembunyikan, seperti spoiler pada Award Valentine, dan kedua, spoiler yang menggunakan perintah tidak langsung, yaitu dengan menambahkan script dan kode CSS pada template blog, seperti "Membuat Toggle Spoiler Untuk Blok Komentar".

Spoiler Jenis Pertama
Jika kamu tertarik dengan spoiler jenis pertama ini silahkan klik tampilkan caranya di bawah ini:

Pada setiap ingin membuat spoiler, buatlah perintah seperti berikut:
<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;">TULISAN/GAMBAR YANG AKAN DISEMBUNYIKAN</div></div></div !akhir spoiler>
Kamu dapat mengubah perataan teks input, lebar kotak input, warna latar input, warna huruf input, kalimat pada value, padding teks/image yang disembunyikan, dan perataan teks yang disembunyikan sesuai keinginan kamu.

Spoiler Jenis Kedua
Jika kamu tertarik dengan spoiler jenis kedua (lihat contoh pada Recent Readers dan Related Post) silahkan klik tampilkan caranya di bawah ini:

Langkah-langkah membuatnya sebagai berikut:
  • Login ke akun Blogger kamu.
  • Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
  • Cari kode ]]></b:skin> (gunakan Control F atau F3):
  • Letakkan kode CSS berikut di atasnya:
    /*-----Toggle Spoiler-----*/
    .widgethidden {display:none}
    .widgetshown {display:inline}
    
  • Lalu letakkan script berikut di bawah kode ]]></b:skin>:
    <script type='text/Javascript'>
    function togglespoiler (postid){
     var whichpost = document.getElementById(postid);
     if (whichpost.className=="widgetshown"){
     whichpost.className="widgethidden";
     }
     else{
     whichpost.className="widgetshown";
     }
    }
    </script>
    
    Catatan:
    Bagi yang sudah memasang CSS dan script toggle spoiler untuk blok komentar, abaikan perintah di atas.
  • Setelah itu, pada setiap ingin membuat spoiler, buatlah perintah seperti berikut:
    <div style="text-align:center; margin:0px 0px; font-size:auto; font-weight:bold;">
    <a href='javascript:togglespoiler ("spoiler1")' style='border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:3px 10px; background-color:#e6e6e6;' title='Click for expand'>Tampilkan/Sembunyikan</a></div>
    <div class='widgethidden' id='spoiler1'>
    TULISAN/GAMBAR YANG AKAN DISEMBUNYIKAN
    </div>
    
    Catatan:
    Jika kamu akan membuat spoiler lebih dari satu, maka pada link javascript dan id-nya ganti menjadi spoiler2, spoiler3, dst. Atau bisa juga membuat nama id sendiri, seperti: foto, puisi, kartun, dll.
    Kamu dapat mengubah perataan teks, margin atas-bawah dan kanan-kiri, ukuran huruf, besaran huruf, judul link (kalimat Click for expand), dan nama link (kalimat Tampilkan/Sembunyikan) sesuai keinginan kamu.

Nah, segitu aja sob, mudah-mudahan bermanfaat. Selamat mencoba....

Referensi: Dari berbagai sumber
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    20 komentar

    Waa.., ternyata caranya tak semudah aku bayangkan. Banyak sekali kode-2nya yg harus aku atur sendiri....

    BTW, thanks udah bagi-2 ilmu ya..

    1 Maret 2010 09.15  

    makasih ilmunya..

    wah ketinggalan kereta nih...komennya...setelah long wikend yang emang long...hehehe...

    1 Maret 2010 11.36  

    ini dia yang aku cari,
    thanks mas, sangat bermanfaat, hehe

    1 Maret 2010 14.01  

    makin bagus aja ne mas tutorialnya. Oya mas, template sy sdh ganti dg amoeba. Trimakasih saran dan masukannya mas.

    1 Maret 2010 16.02  

    mas enes, gimana biar komentar tdk ada anonim-nya. Biar yang komentar muncul namanya. Sprti punya mas ini, bener2 cerdik, hehe.., dibagi ya ilmunya. trimakasih mas

    1 Maret 2010 16.09  

    salam sobat
    menarik nich,,
    saya pingin coba cara buat spoiler jenis yang kedua, bang Enes,,tapi coba2 dulu,,

    2 Maret 2010 11.29  

    Saya juga baru tahu, nanti kupraktekan! Trims!

    2 Maret 2010 20.04  

    alhamdulillah setelah cukup lama g muncul, skrg bisa nongol lagi. Bagus sebagai tambahan pengetahuan

    3 Maret 2010 05.41  

    hehe 2010 aya nu nyumput... oh namanya spoiler kirain hidden:D

    hebat bin keren. semakin rame plus meriah unk. sukses lah
    jadi kabita deui... pengen turun dari gunung es

    3 Maret 2010 16.26  

    Terima kasih ya Kang, sudah lama mau cari tau mengenai ini, tapi ngga tau namanya...

    3 Maret 2010 17.32  

    manteplah........
    di antos deui lah online na.
    gentos kang nganggo layanan seluler........CDMA mun tiasa mah, milih paket murah meriah we kang.

    3 Maret 2010 23.52  

    Assalamu'alaikum ...
    Kang, scroll teh sababaraha dicobian, tetep tidak bisa. Kenapa, ya? Janten we ku abdi teh dicul-keun. Hasilna teh itu, yang sekarang tampil di blog-ku.
    Punten Kang ngarerepot wae yeuh urang Garut teh ...

    5 Maret 2010 10.05  

    kang aya kontes tuh...hihihi
    bising bade ngiringan aw aw aw

    7 Maret 2010 03.57  

    ini yang kucari-cari dari dulu .... akhirnya nemu disini ....

    makasih .... besok langsung dipraktekin ....

    10 Maret 2010 05.44  

    Nuhun Pisan kang,, Manstab Tea yeuh artikelna.

    Salam kenal dari newbie blogger kang.

    23 April 2010 16.28  

    AKANG Kalo tulisan nya di ganti gambar bisa ga??

    19 Mei 2010 09.26  

    boss bikinin aq blog kyk seperti anda...nanti ongkosnya aq kirim...aq pusing bikin blog secantik anda...buruan ya..???ongkosnya nanti aq transfer....bisa ga boss???

    3 Desember 2010 22.46  

    Wah bisa berhemat tempat nich... tanks boss...

    15 Mei 2011 23.47  

    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