Cara membuat Spoiler

Spoiler Berguna untuk menyimpan Tulisan yang panjang dan dibuat tersembunyi agar terlihat lebih ringkas. Spoiler ada yang di gunakan di Layout dan di posting. Saya menggunakan spoiler di Halaman Web saya. Kamu bisa lihat di sebelah Kanan terdapat tombol "Tampilkan info Lain" itu adalah Spoiler yang saya gunakan di halaman Web, sehingga lebih ringkas. Langsung kita pelajari.

Cara memasang Spoiler di Halaman Web :

1. Login Blogmu
2. Pilih Rancangan
3. pilih Elemen laman.
4. Pilih Tambah Gadget.
5. Pilih Html/Javascript.
6. Copy paste Script di bawah ini di kotak yang tersedia.
<div align="center"><div style="margin: 5px;"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 0px; width: auto; font-size: 12px;" value="Tampilkan Info Lain" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Widget'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: 0px; text-align: center;">
 Isi dengan Code Widget Atau Tulisan Kamu   </div></div></div></div></div>
7. Klik Save !

Cara memasang Spoiler pada Posting :

1. Login Blogmu.
2. Pilih Posting.
3. Pilih Entri Baru
4. Tulis dahulu isi artikelmu.
5. Kemudian Buka Edit HTML di Sebelah Kiri Pojok pengaturan Entri. atau di sebelah menu Compose
6. Kemudian Kamu Cari Letak Posisi Spoiler Kamu. Bila Sudah Ketemu Copy Paste Script Di bawah ini di Posisi tersebut.
<div align="center"><div style="margin: 5px;"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 0px; width: auto; font-size: 12px;" value="Tampilkan Info Lain" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Widget'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: 0px; text-align: center;">
Isi dengan Code Widget Atau Tulisan Kamu </div></div></div></div></div>
7. Kemudian klik Kembali Menu Compose.
8. Hasilnya Seperti gambar Di bawah.

Keterangan :

• Tulisan Berwarna biru adalah judul Tombol awal sebelum di klik. Silahkan Kamu ganti dengan tulisan lainnya.
• Tulisan Berwarna Orange adalah Judul Tombol setelah di Klik Biasanya Berupa tulisan Tutup, Close, Exit Dll. Silahkan kamu ganti dengan tulisan lainnya.
• Tulisan Berwarna Hijau adalah Judul tombol Sesudah Di tutup. Silahkan kamu ganti dengan tulisan lain. Contoh Bisa Kamu lihat DI Hasilnya.
• Tulisan berwarna Merah adalah Isi dari Spoiler tersebut silahkan kamu ganti dengan Code Widget atau Tulisan, Kalimat Dll.

Selamat Mencoba !

Hasilnya :

Bisa Kamu isi dengan Code Widget Atau yang lain seperti kalimat Pangjang agar lebih Ringkas.