Cara Membuat Tombol Spoiler Pada Blog (2)

Cara Membuat Tombol Spoiler Pada Blog. Tombol SPOILER berfungsi untuk menghemat ruang pada blog anda, atau dengan kata lain, dengan memfungsikan tombol spoiler ini maka tampilan yang belum saatnya diperlukan untuk dibuka akan tersimpan (tertutup). Ketika tombol ini di klik, akan muncul apa yang tersimpan tadi di bawahnya.

Cukup jelas bukan, fungsi atau gambaran dari tombol ini. Oke, langsung saja kita coba membuatnya.

Dalam postingan atau artikel yang anda buat, bila memang diperlukan tombol spoiler ini maka anda cukup menambahkan kode di bawah ini :

<div align="justify" style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">

<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 = 'Closed'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="margin: 0px; padding: 5px; width: auto;" type="button" value="Show" /></div>

<div class="alt2">
<div style="display: none;">

<div style="border: medium none; padding: 10px; text-align: justify;">

ISI KONTEN ANDA DISINI

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

Copy kode hasil tombol spoiler tersebut pada area HTML anda dalam postingan.

Untuk 'Show' dan 'Close' --> bisa anda ganti sesuai kebutuhan arahan teks anda.

Untuk 'Isi Konten Anda' --> ganti sesuai apa yang akan anda tampilkan (bisa teks maupun gambar).

Sekian dulu tutorial  Cara Membuat Tombol Spoiler Pada Blog,  selamat mencoba dan semoga berhasil.