Membuat Spoiler (Show and Hide Code)

Pastinya anda sudah tahu kebiasaan saya dalam mem-post artikel, yupz... saya selalu tidak banyak basa-basi. Mari kita coba membahas tentang "Membuat Spoiler (Show and Hide Code)". Tutorial ini sering saya gunakan dalam menulis kode HTML/Javascript. Untuk mengetahui apa itu Spoiler silakan lihat contoh berikut:

JUDUL SPOILER

ISI SPOILER

Berikut ini ada tutorialnya :

Code

<div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"><b style="font-family: &quot;Courier New&quot;,Courier,monospace;"><span style="color: blue;">JUDUL SPOILER</span></b> </span></i><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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" value="Show" type="button"></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;"><span style="font-family: &quot;Courier New&quot;,Courier,monospace;">ISI SPOILER</span></div></div></div>

Keterangan:

• Ganti tulisan berwarna biru dengan Judul Spoiler

• Ganti tulisan berwarna merah dengan Isi Spoiler (isi Spoiler tidak selalu berupa kode, anda juga dapat menyisipkan foto sebagai isi Spoiler)

Simple kan?! Selamat mencoba.

Baca juga artikel berikut ini :

Tips dan Trik

• Cam Studio 2.0 Free
• HJ Split Free Download dan Tutorial
• Hack Client Billing Explorer
• Desktop Locker Versi 1.60 Free
• Cara Mengembalikan Chat Lama Facebook
• Mengambil Gambar Pada Tampilan Monitor (Screenshot)
• Membuat dan Mempercantik Title Bar
• Pasang Google Translate pada Blog
• Membuat Text Area (Kode Tukar Link)

Code

• Membuat dan Mempercantik Title Bar
• Pasang Google Translate pada Blog
• Membuat Text Area (Kode Tukar Link)
• Membuat Daftar Isi Blog
• Menampilkan HTML/Javascript pada Blog
• Pasang Jam di Blog
• Mengganti Icon Blogger
• Pasang Lencana Facebook di Blog
• Mengganti Address Blogspot

Posted in: Code,HTML/Javascript,Tips dan Trik,Tutorial,Tutorial Blogging