Membuat Botton Atau tombol Hide Show | Spoiler

Bagai mana cara membuat tombol spoiler / tombol hide show untuk melihat suatu code atau macam-macam yg akan kita sembunyikan . tombol ini berfungsi untuk menyingkat jumlah tulisan artikel yg terlalu memanjang ataupun hanya sekedar style .. terserah yg penting gak bikin ngejubel artikel postingan . breikut di bawah ini code spoiler silah kan copas .

Tombol spoiler menyembunnyikan suatu objek dari postingan bisa itu berupa gambar maupun Code HTML yang kita taruh pada sebuah tutorial postingan. Demi menghemat suatu ruang posting kita sangat membutuhkan ini , selain bisa di jadikan style , juga bisa sangat bermanfaat tentu nya .

<div> <div style="background-color: black; color: red; font-family: serif; font-size: 13px; line-height: 18px;"> <div> <div style="margin-bottom: 2px;"> <b><small>Klik show untuk melihat</small></b></span><br /> <span style="background-color: black; color: red; font-family: serif; font-size: 13px; line-height: 18px;"><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> </span><br /> <span style="background-color: black; color: red; font-family: serif; font-size: 13px; line-height: 18px;"><div style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> </span><br /> <strike style="background-color: black; color: red; font-family: serif; font-size: 13px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Masukkan tulisanmu di sini</strike><br /> <span style="background-color: black; color: red; font-family: serif; font-size: 13px; line-height: 18px;"></div> </div> </div>

Keterangan : Ganti tulisan "Masukan tulisanmu disini" dengan tulisan atau kode yang akan di beri spoiler.



Contoh :


Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.