Cara Membuat Spoiler Di Blog

Cara Membuat Spoiler Di Blog - Assalamualaikum Wr.. Wb . . .
Selamat malam akang akang semua. Kali ini Kick Nawan akan membagikan bagaimana Cara Membuat Spoiler Di Blog.

Spoiler adalah salah satu fitur dimana fungsi nya adalah untuk menyembunyikan konten agar terlihat rapih dan irit dalam penempatan katena konten yang begitu panjang dapat ditutu menjadi satu baris saja.
Saya yakin akang akang yang sering bermain di Forum forum sudah tidak asing lagi dengan fitur Spoiler.

Mungkin akang akang masih pusing dengan penjelasan diatas, jadi saya beri contohnya seperti apa spoiler itu.

Klik tombol show untuk membuka spoiler

Nah fitur diatas yang dinamakan spoiler, sudah mengertikan?
Dan berikut ini Script Spoiler nya :

<div style="margin-bottom: 2px;">Klik tombol show untuk membuka spoiler<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; 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;"> Ini lah yang nama nya spoiler </div></div></div>

Keterangan :

Tulisan berwarna merah berfungsi sebagai tulisan yang ada di samping tombol show
Tulisan berwarna hijau befungsi untuk meberikan nama pada tombol
Tulisan berwarna biru berfungsi untuk is dari Spoiler
Maka tulisan yang berwarna warni itu bisa akang ganti sesuai keinginan

Untuk pemasangan gambar dalam spoiler bisa menggunakan Script ini

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiobX-n0-aA4TryINOz3YVt3tsc0T6R6vwGMpBDp7n6KEfGA4zU2OmLEIBNeUYrkQyyeCzuQieV7hzu6DG-4mCnmI1su3juQyxTUEZ8Gr5jSyCIH-EdE5QzNX0yQp46t2_CwDw26T_EJU8/s1600/gad.jpg" border="0" alt="Post spoiler"></div>
</div>
</div>

Itulah Cara Membuat Spoiler Di Blog.

Semoga bermanfaat

Salam Kick Nawan

Laporkan jika akang menemui link download yang rusak DISINI