MEMBUAT TOMBOL HIDE DAN SHOW (SPOILER)

Kali saya share bagaimana kita membuat menu “hide dan show”, menyembunyikan dan menampilkan sebuah tulisan yang kita inginkan dalam sebuah postingan blog. Mungkin sobat blogger ingin menyembunyikan sebagian artikel atau gambar dengan menggunakan tombol hide/show? Agar artikel terlihat tidak terlalu banyak/panjang, sobat bisa gunakan script spoiler. Mau tau caranya..? hal ini juga dapat kita manfaatkan sebagai pengganti menu “Read More”

Caranya copy Script dibawah ini dipostingan sobat dalam posisi HTML.

<div> <input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;) [1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39; ; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;) [1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39; ; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; } " type="button" /></div> <div class="alt2"> <div style="display: none;"> <div style="background:#000000;text-align:left;padding:10px;color:#ffffff;"> Masukkan text-nya disini. Gambar juga bisa. </div>

Setelah mengcopinya dan masih dalam posisi HTML, ganti tulisan "masukkan teksnya disini, Gambar juga bisa" dengan teks atau gambar yang mau disembunyikan. Kemudian kembali/klik ke posisi “Compose” lihat hasilnya, tulisan pengganti "masukkan teksnya disini, Gambar juga bisa"  tentu tidak terlihat dan hanya ada tulisan “Tampilkan”. Demikian juga bagian tulisan yang berwarna kuning dan merah dapat sobat edit sesuai kebutuhannya masing – masing.

Semoga share ini bermanfaat.

Selamat mencoba semoga berhasil……!!!!