Cara Membuat Spoiler Di Blog

Cara Membuat Spoiler Di Blog

Assalam, baru saja saya posting Cara membuat Blockquote,
sekarang akan saya bahas lagi tutorial Blogging, kali ini saya bahas mengenai cara membuat spoiler.
Bagi yang belum tahu apa itu spoiler, coba klik button di bawah ini

Klik Disini --- > 

Inilah yang di sebut dengan spoiler, merupakan media untuk kita menyembunyikan teks, gambar, maupun video, sehingga tampilan postingan kita terkesan rapi,
sudah paham bukan, apa itu spoiler? klik lagi tombol "Tampilkan" untuk menyembunyikan teks ini

Untuk Spoiler diatas, di gunakan untuk menyembunyikan teks saja,
Berikut Scriptnya:

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="color: red;">Bisa Diisi dengan judul spoiler</span>&nbsp;<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;" type="button" value="Tampilkan" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 5px;">
<div style="display: none;">
Masukkan teks Sobat Di Sini </div>
</div>
</div>

SCRIPT SPOILER UNTUK MENYEMBUNYIKAN GAMBAR
spoiler untuk menyembunyikan gambar ini agak sedikit lebih susah di banding spoiler isi teks,
1. Sobat Masukkan gambar terlebih dahulu ke postingan sobat, melalui menu insert image (Lihat Gambar Di bawah)

2. lalu klik menu "HTML" sebelahnya "Compose"
3. cari kode gambarnya, biasanya seperti ini

height="320" src="http://1.bp.blogspot.com/-dklyjgCv0PY/UMGubdLZM1I/AAAAAAAAAPE/99-bU7l3WTo/s400/namagambar.jpg" width="99"

4. Jika sudah ketemu biarkan saja, pastekan script berikut untuk membuat spoiler nya:

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="color: red;">Gambar</span></i> <span style="color: red;"><i>-- &gt;</i></span>&nbsp;<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: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<img alt="picture" border="0" class="center" height="320" src="http://3.bp.blogspot.com/-lsYZAqbRUf8/UMGNombzpWI/AAAAAAAAAOU/gLnBt9nrEXM/s320/namagambar.jpg" width="99" /></div>
</div>
</div>

teks yang berwarna merah di atas, gantikan dengan kode gambar yang sudah di temukan tadi, kalo sudah di copas, sobat bisa hapus gambar yang tadi di masukkan.
selesai tuh,
selamat mencoba,
Sekian Tutorial dasar blogging sore kali ini,
jangan lupa tinggalkan komentar,
wassalam...
^.^