Cara Mudah Membuat Tombol Spoiler/Auto Hide di Blog

Apa fungsi dari Spoiler di Blog, Spoiler merupakan sebuah tombol yang berfungsi untuk menampilkan dan menyembunyikan suatu konten, dalam artian tombol spoiler digunakan untuk mengirit ruang posting agar postingan tidak terlalu memanjang kebawah atau bisa juga sebagai tombol yang membedakan bahwa konten yang berada didalam spoiler merupakan inti/pokok dari sebuah postingan. Tombol spoiler jika di klik maka akan terbuka dan di dalamnya terdapat isi yang biasanya berupa kode script, link, gambar, artikel, video, dll (tergantung dari apa yang ingin anda masukkan didalam spoiler) dan jika tombol tersebut di klik kembali maka tombol tersebut akan menutup. Jadi intinya fungsi dari Spoiler adalah menyembunyikan file dan untuk melihatnya maka anda harus menekan tombol yang telah di sediakan, Ini bertujuan agar loading Blog lebih cepat (tidak berat) dan terlihat rapi. Cara Membuat Spoiler di Blog cukup mudah, hanya dengan Copy Paste Script di bawah ini ke dalam Postingan HTML atau bisa juga di sidebar, sesuai keinginan anda.

<div id="spoiler"> <div><input type="button" value="Lihat" style="margin:0px;padding:0px;" 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;Tutup&#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;Lihat&#39;; }" /> </div> <div style="background: #B25900; margin: 10px auto; border: 0px solid #000; padding: 5px;"> <div style="display: none;"> Disini isikan sesuka anda </div></div></div>

Keterangan :

• Tulisan yang berwarna kuning anda bisa mengubahnya sesuai keinginan.
• Kode berwarna biru merupakan warna spoiler, ubah kode tersebut jika anda menginginkan warna lain: lihat tool kode warna HTML.
• Tulisan Warna ungu silahkan di ganti dengan keinginan anda, misalnya di isi dengan: kode script, link, gambar, artikel, video, dll.