Kalian pernah melihat situs forum Kaskus?? (Kalo belum,, kemane aje lo...!!! hehehe.. ehhmm.. -_-'), Kalian pasti lekat dengan istilah 'Spoiler' (Bagi yang tidak tahu, contohnya ada di postingan ini). Spoiler dapat menyembunyikan sesuatu baik itu teks kalimat, gambar, tabel, widget chat, dll. Spoiler juga dipakai oleh Situs Ensiklopedia Online Wikipedia untuk membuat daftar isi dan menu pada tiap-tiap halaman judulnya.

Untuk membuatnya sendiri cukup menggunakan kode HTML yang sederhana. Kode tersebut dapat di copy & paste ke dalam widget blog dan dapat ditempatkan sesuka hati, atau bisa juga dipasang dalam postingan seperti postingan kali ini.. ^^

Berikut bentuk-bentuk spoiler yang dapat kalian gunakan beserta kodenya:



Judul Spoiler Biasa :
ISI SPOILER
Isi dapat berupa teks atau gambar untuk mengisi gambar, tuliskan kode <img src='http://www.situs.com/file-gambar.jpg'/>
Untuk memasang kode ini silahkan copy & paste kode berikut:

<div style="padding: 10px;">
<div style="margin-bottom: 2px;"><b>Judul Spoiler Biasa :</b>
<input value="Buka" style="border:2px inset ;margin:0px; width: 60px;color:#000; font-size: 10px; height:20px;" 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 style="margin: 10px 0 0px 0; padding: 5px; border: 2px inset #fff;">
<div style='display:none'>ISI SPOILER</div>
</div>
</div>

Judul Spoiler Soft:
ISI SPOILER

Isi dapat berupa teks atau gambar untuk mengisi gambar, buat kode <img src='http://www.situs.com/file-gambar.jpg'/>
Untuk memasang kode ini silahkan copy & paste kode berikut:

<div style="padding: 10px; border:1px solid #ccc;background:#e9eef2">
<div style="margin-bottom: 2px;"><b>Judul Spoiler Soft:</b>
<input value="Buka" style="border:0px solid #000;margin:0px; width: 60px;color:#fff; font-size: 10px; height:20px; background:#323c47" 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 style="margin: 10px; padding: 0px; border: 0px inset #fff;">
<div style='display:none'>ISI SPOILER</div>
</div>
</div>

Judul Spoiler Tanpa Background & Border :
ISI SPOILER
Isi dapat berupa teks atau gambar untuk mengisi gambar, buat kode <img src='http://www.situs.com/file-gambar.jpg'/>
Untuk memasang kode ini silahkan copy & paste kode berikut:

<div style="padding: 10px; border:0px solid #ccc;background:#fff">
<div style="margin-bottom: 0px; font-family: arial;font-size:12px;"><b>Judul Spoiler Tanpa Background & Border : </b>
<input value="Buka" style="border:0px solid #000;margin:0px; width: 30;color:#000;font-family: arial; font-size: 12px; height:16; background:#fff; font-weight:bold" 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 style="margin: 10px; padding: 0px; border: 0px inset #fff;">
<div style='display:none'>ISI SPOILER
</div>
</div>
</div>
 

Judul Spoiler Ala Wikipedia: []
ISI SPOILER
Isi dapat berupa teks atau gambar untuk mengisi gambar, buat kode <img src='http://www.situs.com/file-gambar.jpg'/>
Untuk memasang kode ini silahkan copy & paste kode berikut:

<div style="padding: 10px; border:1px solid #ccc;background:#f9f9f9">
<div style="margin-bottom: 0px; font-family: arial;font-size:12px;"><b>Judul Spoiler Ala Wikipedia:</b>
<input value="Buka" style="border:0px solid #000;margin:0px;color:#0000FF;font-family: arial; font-size: 12px; height:16; background:#f9f9f9" 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 style="margin: 0 10px 0px 10px; padding: 0px; border: 0px inset #fff;color:#0000ff">
<div style='display:none'><br/>ISI SPOILER</div>
</div>
</div>



Untuk memasangnya sendiri cukup sederhana. Kalau ingin memasang dalam postingan seperti di atas, cukup copas kode HTML untuk spoiler yg diinginkan ke dalam postingan (Harus dilakukan di tab 'Edit HTML' lho...!!! ^^ ). Kalau ingin memasangnya sebagai widget, bisa di-copas ke dalam widget Kode HTML/Javascript (di tata letak blogger, pilih 'tambah gadget', dan pilih kode HTML/Javascript, dan simpan) silahkan letakkan sesuka hati.. ;)

Isi spoiler bisa kalian tentukan sendiri, entah itu kata-kata, widget (dari kode javascript), dsb.

Unik kan...!! Kalau begitu silahkan langsung mencoba...^^ 



KEMBALI KE ATAS

Kunjungi artikel yang berhubungan:


Mengenai Saya

Foto Saya
Mizan
Mahasiswa rantau yang mendalami kajian Ilmu Jurnalistik, saat ini sedang sibuk dengan kuliah sambil berbagi info di Dumay (Dunia Maya) ^^v. Blog ini beroperasi secara profesional, berisi tentang info2 seputar komputer dan blogging. Semoga blog ini dapat memberi inspirasi dan info tambahan pada pedoman blogging pengunjung semua. ^^ trims..
Lihat profil lengkapku

Pos Terpopuler