Cara Membuat Tombol Hide Dan Show

remoxp
35
Pada postingan sebelumnya saya membahas tentang cara membuat related post di blogger, bila sobat blogger tertarik membacanya, silakan klik cara membuat related post.

Namun pada kesempatan kali ini saya akan mencoba berbagi tips blogger tentang cara membuat tombol show dan hide seperti punya saya, yang saya pergunakan untuk membuat category. (lihat disebelah kiri). Bagaiamana??? tertarik??
Oke kita langsung aja,
Cara membuatnya pun sangat mudah, anda hanya perlu mengcopy-paste script yang saya berikan, kemudian edit sesuai dengan keperluan anda.

<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</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;">

ISI NYA (Terserah anda)

</div></div></div>


Maka akan terlihat seperti ini,

JUDUL SPOILER



ISI NYA (Terserah anda)



Ataupun bisa seperti ini,




ISI NYA (Terserah anda)



Kalau anda menginginkan tampilan seperti ini, anda hanya perlu menghilangkan kode <i><b><small>JUDUL SPOILER</small></b></i> lalu anda ganti kata show dan hide sesuai keinginan anda. Tapi jangan lupa juga untuk mengganti ukuran lebar nya, Misal: width:100px;

Selamat Mencoba.

Post a Comment

35 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Saya tidak online 24 Jam dan hanya sendiri mengurus blog ini, mohon maaf bila komentar anda tidak di balas.
Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
Komentar SPAM, SARA, dan sejenisnya tidak akan di tampilkan.
Komentar hanya Thanks, Mantap, Pertamax, dll. Tidak akan di tampilkan.

  1. Assalamu'alaikum. Tap mantap sobat.

    ReplyDelete
  2. @Acex : Waalaikum salam,,, makasih sob.. :D

    ReplyDelete
  3. Sip...mantep sob...
    Kalo gue lebih suka ama model spoiler yang biasa, tanpa hide and show :D

    ReplyDelete
  4. ini yang ku cari"shob... mantap,. langsung ku coba ya shob,. makasi,..

    ReplyDelete
  5. @RantZ RcheL: Sama-sama sob,, makasih dah berkunjung...

    ReplyDelete
  6. Wahh...bagus nih tutorialnya thankz yaa !!! :D

    ReplyDelete
  7. Thank infonya..salam kenal ;)) ini ilmu yang q cari2 cara buat tombol show and hidden akhirya ketemu jg...:D

    ReplyDelete
  8. klo yang persis sma yang samping gmn sob,..

    ReplyDelete
  9. mantap bro, lgsg k tkp, dah q cri2 kmn2 eh ternyata da dsni, maju terus bro...

    ReplyDelete
  10. klo yang seperti yang samping ini gmn cranya shob

    ReplyDelete
  11. Kk remo tolong dunk aku gak ngerti cara buat domain dot com.klo udah teregiser gimana lagi..bingung ... an maksud nya referal tu apa kk remo..makasih,remo is my inspirator for my blog n my software....yuya-freeware.blogspot.com
    ntar mampi ya kk n jgn lupa tolong yg tadi jangan lupa..heheheh

    ReplyDelete
  12. mang anda register di mana??? sudah transfer dana nya blm?? selanjutnya setting DNS sob,, referal biar lebih jelasnya coba cek di google aja,, ok

    ReplyDelete
  13. k'...
    ra g berhasil buat chatbox nya..
    yang tampil cuma judul gadget ma kotak kosng..
    gimana dunk k'..???

    truss..
    kode yang diatas dicopy kemana k'..??
    mohon pencerahan..
    >.<
    masih newby..
    :P
    makasih sebelum'y..
    :)

    ReplyDelete
  14. nice tips and trick sob....

    follow and comment sukses...ditunggu kunjungan and balasannya.....

    ReplyDelete
  15. Thank atas info'y mas remo...

    Sukses terus.. :)

    ReplyDelete
  16. apasal aq buat x mnjadi lak :((

    ReplyDelete
  17. remo buat isi gimana cara ngisinya plis kasih tau

    ReplyDelete
  18. Makasih yah sob atas infonya. ^_^

    ReplyDelete
  19. Mas remo mau tanya nih gmn cara hilangin gaRisnya??

    ReplyDelete
  20. Assalamu'alaikum....
    Trima kasih banyak mas atas tutorial dan free softwarenya yang begitu banyak membantu saya membuat blog dan maaf saya nge-link mas mohon bantuan kritik dan saran atas blog saya
    Trima kasih
    Wassalamu'alaikum

    ReplyDelete
  21. Makasih banyak mz.
    oya mz,kalo yg "Isinya Terserah Anda" pengen dibuat link ke suatu halaman caranya gmana mz???

    ReplyDelete
  22. terus cara buat menu yang baru bagai mana bang
    tolong balez,,, plissss,,,,,,,,,,,,

    saya pengen banget blog Q kayak www.remo-xp.com tapi g' bisa mrip"

    ReplyDelete
  23. Assalamu'alaikum
    Mas Remo caranya masang link fanpage facebook twitter gimana caranx Plizzzzzzzzzzzz tolong dijawab

    ReplyDelete
  24. Wuuiihhh mantap banget nih,walaupun saya belum ngerti jg hehehe..

    http://fuad-xp.blogspot.com/

    ReplyDelete
  25. klo di masukin gambar gimana pm remo-xp
    http://rizkykakku.blogspot.com/

    ReplyDelete

Saya tidak online 24 Jam dan hanya sendiri mengurus blog ini, mohon maaf bila komentar anda tidak di balas.
Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
Komentar SPAM, SARA, dan sejenisnya tidak akan di tampilkan.
Komentar hanya Thanks, Mantap, Pertamax, dll. Tidak akan di tampilkan.

Post a Comment
Our website uses cookies to enhance your experience. Learn More
Accept !