Cara paling mudah Untuk Membuat Spoiler

hai sobat beginerblog pada hari ini saya ingin berbagi tentang " Cara Paling Mudah untuk membuat spoiler pada Blog" stelah kurang lebih beberapa hari yang lalu saya mensharing tentang cara untuk membuat daftar harga ,lalu beberapa hari kemudian saya memposting tentang trick dasar SEO mudah.
Lalu pada malam hari ini saya akan memberikan Tips dan Tricknya untuk membuat spoiler di blog
yang sajikan dalam bentuk scroll......hitung - hitung hemat Biaya,,,,,,,

<div style="margin-bottom: 2px;">Klik 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;">Ternyata mudah ya memasang spoiler itu, asal kita ada kemauan pasti bisa</div></div></div>

Nb : Yang berwarna merah dapat diganti dengan selera sobat 
      : Yang berwarna biru di atas adalah teks yang hendak dimunculkan di browser

maka hasilnya akan seperti ini

Ternyata mudah ya memasang spoiler itu, asal kita ada kemauan pasti bisa

nah jika soba ternyata masih kurang puas dengan tampilan yang berupa teks....,dapat mencoba berupa gambar ... berikut ini scriptnya :

<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/AVvXsEg5Zk_DWzNBKEjHrZopawuCEd56L3y4_FV86QXReKiibiLigWP0OZrgZ20N-gJF50s5rcG4MgB0HeVr-tSS0PjjpHfprqoiyJWK4jk6FAPHbN14UniZOpOo7x4j75Jb66VpTkBb4_zAZaM/s320/Untitled-1+copyy.jpg">

</div>
</div>
</div>

 Nb: Yang berwarna biru di atas adalah url gambar saya ....,dapat diganti dengan selera sobat.....

  maka hasilnya akan seperti ini :

                                                            

selamat mencoba....
semoga berhasil......

jika ada yang mau yang ditanyakan atau ada yang kurang jelas dapat langsung ditanyakan melalui email saya atau dapat langsung melalui komentar di bawah ini.......

Artikel terkait :