18 March 2012

Cara Buat Tombol Hide and Show (Spoiler)

spoiller, hide and show,tombol

Tomblo Hide and show lebih populer dengan sebutan Spoiler. Mungkin, dari namanya saja "Hide and Show" sobat blogger sudah tau fungsi dari tombol ini. Tidak tau? Ya sudah, saya jelaskan sedikit. Hide dalam bahasa Indonesia berarti menyebunyikan dan Show dalam bahasa Indonesia berarti menunjukkan. Jadi, tombol Spoiler berfungsi untuk menyembunyikan teks, Link atau gambar. Spoiler ini sangat bermamfaat buat blog karena dengan adanya spoiler, kita bisa mengemat tempat kalau kita gunakan saat menulis artikel dan bisa menghemat tempat juga kalau kita gunakan sebagai Widget atau Gadget. Tempatkan kode Hide and Show atau spoiler pada tempat yang diinginkan (Kolom Postingan atau Kolom HTML/Java Script)


<div><div style="margin-bottom: 2px;"><i><b><small>Coba di Klik</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px;font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'show'; }" type="button"></div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI  
</div></div></div> 


Hasilnya akan terlihat seperti di bawah ini

Coba di Klik

TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI


Tambahan :
Jangan lupa mengganti "TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI" dengan gambar, link atau tulisan yang akan disembunyikan

Baca tutorial menarik lainnya di bawah ini :

45 comments:

  1. caranya pasang tombol hide, tapi didalam tombol ada tombol downlod gimana?

    mohon bantuanya

    ReplyDelete
  2. gan follow back,, http://cepyferniawan1.blogspot.com

    ReplyDelete
  3. ThaNkS om, dari tadi iNi yaNg Saya cari, LaNgSuNg dicoba deCh???

    ReplyDelete
  4. nice info....goog job.......thanks

    ReplyDelete
  5. sangat membantu sekali informasinya,gan.. terima kasih

    ReplyDelete
  6. wah sangat mantap gan,,,,,terima kasih infonya ..

    ReplyDelete
  7. apkh bisa juga untuk menyembunyikn gambar animasi.??

    ReplyDelete
  8. nice info,,thnks ya n salam persahabatan

    ReplyDelete
  9. makasih infonya gan.... thanks........

    ReplyDelete
  10. TErimakasih infonya kawan. yang mau back link dengan saya aku persilahkan.

    ReplyDelete
  11. Cara awal nya gimana buatnya ya gan??? ane gak ngerti cara buat nya
    http://www.apricyber.blogspot.com/

    ReplyDelete
  12. Thanks kang tutorialnya kren banget, dengan spoiler kita dapat lebih menghemat template di halaman posting... :)

    ReplyDelete
  13. ohh giu ya !! boleh nih... makasih tips sama kode spoilernya ...

    ReplyDelete
  14. wah mantap nichhh..
    thank gan infonya...

    sukses gan..

    ReplyDelete
  15. Kak, kalau pasang tombol hide and show pengaruh besar gg ke berat blog?
    Terima kasih

    ReplyDelete
  16. makasih mas atas artikelnya.. bermanfaat bangett ciuss

    ReplyDelete
  17. iya setuju...
    artikelnya bermanfaat bgt...
    makasihb

    ReplyDelete
  18. klo ni saya wajib coba,oke ijin copas html y mas.
    thx

    ReplyDelete
  19. - Daftar gratis..
    - Sebar Link..
    - Dollar mengalir sendiri ..

    join now.. di link yg ad di bawah ini..
    http://indoboclub.com/?ref=suryantosp

    Dahsyat!
    - Mempunyai 2 sistem utama: Plan GRATIS & Plan INVESTASI.
    - Withdrawal bisa ke PM, Bank Lokal, dan Pulsa.
    - Web semakin AMAN dengan HTTPS/SSL 256 bit.
    - Komunikasi langsung dgn Admin via SMS/Call/FB.
    - Profit 2% x 100 hari + profit extra
    - Tersedia fitur IBC MOBILE, website versi HP

    http://indoboclub.com/?ref=suryantosp

    Rp.100.000 akan jadi Rp.624.857
    Rp.200.000 akan jadi Rp.1.248.975
    Rp.300.000 akan jadi Rp.1.817.192
    Rp.500.000 akan jadi Rp.3.525.249
    Rp.1.000.000 akan jadi Rp.7.137.975
    Rp.5.000.000 akan jadi Rp.36.397.581
    Rp.10.000.000 akan jadi Rp.74.501.569

    http://indoboclub.com/?ref=suryantosp

    ReplyDelete
  20. informasi nya keren..

    mampir jg ke blog ane gan..
    seputar culture n teknologi..

    http://purbalaban.blogspot.com/

    ReplyDelete
  21. Terima kasih bro... info yang diberikan.

    ReplyDelete
  22. cara biar bisa "enter" di spoilernya gimana?

    ReplyDelete
  23. bisa dicoba gan model spoilernya dan berhasilKunjungi balik ya :D

    ReplyDelete
  24. Ane cari spoiler yang bila satu judul gadget diklik maka gadget lain yang terbuka otomatis nutup,jadi bergantian tapi kok ga nemu-nemu yah...apa belum ada dibocorkan nih....

    ReplyDelete
  25. Sangat bermanfaat gan.

    Salam blogwalking.
    http://dinastyabraham.blogspot.com/

    ReplyDelete
  26. <a href="http://obatherbaldenature.edublogs.org/2015/01/30/obat-cairan-nanah-keluar-dari-alat-kelamin/>nama-obat-herbal-sipilisnama obat herbal sipilis</a>

    ReplyDelete
  27. http://www.healthycaresdailylife.blogspot.com

    ReplyDelete