Membuat Spoiler di blog

Spoiler digunakan untuk menyembunyikan dan menampilkan konten di dalam post. Tombol spoiler ini sangat berguna bila anda membuat post yang isinya terlalu panjang. Untuk membuatnya saya kasih beberapa tampilan tombol spoiler sebagai berikut:

Spoiler #1

Tombol Spoiler:

Konten yang disembunyikan di sini...

• Copy kode Script berikut:

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
Tombol Spoiler:  <input float="right" 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'; }" style="background: #006699; border: 1px solid #234B69; color: white; font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Konten yang disembunyikan di sini...</div>
</div>
</div>

Spoiler #2

Tombol Spoiler:

konten yang disembunyikan..

• Copy kode Script berikut:

<div id="spoiler" style="background: #f9f9f9; border-radius: 2px 2px 2px 2px; border: 1px solid #EAEAEA; padding: 5px;">
<div>
Tombol Spoiler: <input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" style="background: #006699; border: 1px solid #234B69; color: white; font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" type="button" value="lihat konten" /></div>
<div id="show" style="border: 1px solid white; display: none; padding: 2px;">
konten yang disembunyikan..
</div><div id="hide">
</div>
</div>
</div>

Spoiler #3

Tombol Spoiler:

konten yang disembunyikan..

• Copy kode Script berikut:

<div id="spoiler" style="background: #d6d5d5; border: 1px solid #EAEAEA; padding: 5px;">
<div>
Tombol Spoiler: <input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" style="font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" type="button" value="lihat konten" /></div>
<div id="show" style="display: none; padding: 5px 2px 2px 2px;">
<div style="background-color: #eeeded; padding: 7px;">
konten yang disembunyikan..</div>
</div>
<div id="hide">
</div>
</div>

Spoiler #4

Tes

• Copy kode Script berikut:

<div id="spoiler">
<div>
<input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" style="background: #535353; border: 1px solid #234B69; color: white; font-family: Arial, Tahoma, Verdana; font-size: 11px; font-weight: bold; margin-left: 5px; padding: 3px 5px 3px 5px;" type="button" value="Lihat konten" />
</div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div class="alt2" style="background-color: #f3f3f3; border-left: 6px solid; border-radius: 3px 3px 3px 3px; box-shadow: 0pt 0pt 16px #ABABAB; padding: 15px;">
konten yang disembunyikan..</div>
<div id="hide">
</div>
</div>
</div>

Selamat Mencoba...
terima Kasih,, :14::37::38: