Cara Buat Spoiler Di Blog

Pada postingan Jago Tutorial kali ini saya akan berbagi Tutorial Cara Buat Spoiler Di Blog. Sebelumnya saya akan menjelaskan sedikit tentang apa itu spoiler di blog. Spoiler di blog ialah suatu space dimana kita bisa meletekkan artikel panjang atau banyak gambar hanya dengan menyediakn sedikit space didalam postingan. Spoiler biasanya menggunakan tombol "Hide and Show" yang mana artinya menyembunyikan dan menampilkan. Spoiler selain bisa diletakkan didalam postingan juga dapat diletakkan di widget blog.


Untuk membuat spoiler di blog sangatlah mudah sekali, anda hanya cukup menggunakan script HTML saja untuk dapat membuatnya. Namun bukan script HTML asal-asalan, karena setiap script HTML mempunyai maksud dari setiap ejaannya.


Berikut saya bagikan Script untuk membuat spoiler di blog.


<div> <div style="margin-bottom: 2px;"> <i><b><small>Coba di Klik</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;"> TULISAN, LINK ATAU URL GAMBAR BISA DILETTAKKAN DISINI</div> </div> </div>


Berikut adalah hasilnya

Coba di Klik

TULISAN, LINK ATAU GAMBAR DILETTAKKAN DISINI

NB : Silahkan Mengganti "TULISAN, LINK ATAU GAMBAR DILETTAKKAN DISINI" dengan tulisan, link atau gambar yang anda inginkan

Demikian Tutorial Cara Buat Spoiler Di Blog yang dapat saya bagikan pada postingan kali ini, semoga bermanfaat untuk kita semua.