Cara Membuat Tombol Hide dan Show

Beberapa hari yang lalu Admin pernah kesulitan dalam menyisipkan sebuah Coding (source code) kedalam postingan blog karena Coding yang Kita post kemungkinan terbaca oleh robot postingan sehingga menampilkan sebuah tipe tertentu  dan pastinya berbeda dengan yang diharapkan.

Oleh Karena Admin mencari ide bagaimana biar coding tersebut aman dalam postingan, dan ide tersebut Admin dapatkan menggunakan Tombol Show and Hide atau yang biasa disebut Tombol Spoiler.

Nah untuk menngunakan tombol Spoiler ini, silahkan copy code Script dibawah ini :

<div> <div style="margin-bottom: 2px;"> <i><b><small>JUDUL SPOILER ANDA</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 (Up to you lah) </div> </div> </div>

Ket: Untuk memudahkan dalam pengeditan silahkan copy terlebih dahulu kedalam notepad sobat, agar lebih leluasa dalam pengeditan.

Mudah Bukan ?
Tidak ada kesulitan dalam programming jika ada kemauan dalam belajar, karena progamming dapat lebih dikuasai dengan Otodidak.

Selamat Berkarya dan Semoga Bermanfaat ^_^

Pernando Harianja Pendiri dan Pengelola di InfoLoh.com, yang hobby dalam pembuatan Program Komputer, dan ngeBlog. Untuk kenal lebih dekat Follow IG saya: @pernando_harianja

Berbagi :