Cara Mudah Membuat Spoiler di Blog

Spoiler?
Apa ya. Yang pasti berisi link jika di klik akan membuka tabel atau panel yang berisi isi data yang tersembunyi. Dan jika di klik lagi biasanya akan menyembunyikan kembali data tersebut. Bentuknya bisa berupa tombol, text, shape atau apa aja yang bisa disisipi script perintah.
Lalu Bagaimana untuk membuat sebuah Spoiler ?
Mudah kok, ikuti aja langkah-langkah singkat di bawah ini, pasti berhasil :.

Cara Membuat Spoiler di Postingan Blog :
1.Login ke akun blog anda
2.Pilih Entri Baru/New Post untuk blogger. Dan untuk wordpress pilih Post > Add New.
3.Lalu pilih mode Edit HTML (blogger) atau mode text (wordpress)
4.Copy paste kode di bawah ini lalu taruh pada mode Edit HTML

<div style=”margin: 5px 20px 20px;”><div class=”smallfont” style=”margin-bottom: 2px;”><b>Judul Spoiler</b>: <input value=”Buka” style=”margin: 0px; padding: 0px; width: 55px; font-size: 12px;” 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 = ‘Buka‘; }” type=”button”>
</div>
<div class=”alt2″ style=”
background: #323802 ; border: 1px inset ; margin: 0px; padding: 6px;”>
<div style=”display: none;”>
Tuliskan Teks Anda di Sini atau kode script gambar/video ! <br>
</div>
</div>
</div>

Keterangan:
Tulisan berwarna Merah adalah yang dapat anda rubah sesuai dengan keinginan anda.Warna Hijau adalah warna background spoiler, jika ada menginginkan tanpa warna bisa anda ganti dengan tulisan Transparent. Dan yang berwana Biru silahkan diganti dengan isi spoiler anda, bisa berupa tulisan, gambar foto, video dan lain-lain.

5. Masih dalam mode HTML, Kik Publish dan lihat hasilnya
6. Selesai deh. Semoga bermanfaat.

Contoh penerapan spoiler >

Contoh Spoiler:
Tadaaaaa….!?!?
Kan kelihatan to Tulisan saya ini, coba klik lagi kan sembunyi lagi. he he he he …..

Berlangganan konten blog ini:

Tinggalkan Komentar

Email anda tidak akan di publikasikan. Lengkapi Data di bawah ini :