Cara Membuat Spoiler Di Blogger

Mungkin bagi orang yang suka berinteraksi dengan orang lain di forum spoiler tidak asing lagi. tapi bagaimana kalau spoiler di pasang di blog?. bagi sebagian orang mungkin cara memasang spoiler di blog sudah hafal di luar kepala:)....spoiler ada 2 macam ( setau saya) kalau ada yang lain silahkan di share ke  saya akan ku terima dengan senang hati tentunya..

Ok Here we go...



Spoiler Versi #1
Contohnya
▼
▼
▼

Judul

Bagian ini adalah Bagian ISI dari spoilernya...kalau anda mau memposting gambar/foto,cukup pasang code HTML nya saja dari Foto tsb

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Bagian ini adalah Bagian ISI dari spoilernya...kalau anda mau memposting gambar/foto,cukup pasang code HTML nya saja dari Foto tsb
</div></div></div></div>

• Perhatikan Judul pada spoiler diatas
• "Bagian ini adalah Bagian ISI dari spoilernya...kalau anda mau memposting gambar/foto,cukup pasang code HTML nya saja dari Foto tsb" 
• Jikalau anda ingin spoiler seperti di atas "code Untuk Spoiler#1"
• perhatikan kode dibawah ini

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Bagian ini adalah Bagian ISI dari spoilernya...kalau anda mau memposting gambar/foto,cukup pasang code HTML nya saja dari Foto tsb
</div></div></div></div>

• Jika anda memperhatikan kode di atas dengan cermat, maka anda tidak akan menemukan JUDUL ( ya saya telah Menghapus JUDUL )
• Intinya adalah saya mengganti Kata Show dan Hide dengan kata Spoiler yang lain

Keterangan 

• Show             = Anda bisa menggantinya contoh Code Spoiler Versi#1 tapi anda perhatikan di dalam kode atas Show muncul dua kali ( 2X ) anda di haruskan mengganti kedua kata Show tsb dengan Code Spoiler Versi#1
• Hide              = Anda bisa mengganti Hide dengan Sembunyikan atau yg lainnya
• Width            = Lebar yang di maksud disini adalah lebar dari tombol Submit, anda dapat menyesuaikannya dengan judul spoiler anda Code spoiler Versi#1 ,saya membuat lebar untuk judul Code Spoiler Versi#1 menjadi 150px
• Font Size       = Untuk font saya lebih suka menggunakan 12px, terserah anda

Spoiler Versi #2
Contohnya
▼
▼
▼

Bagian ini adalah Bagian ISI dari spoilernya...kalau anda mau memposting gambar/foto,cukup pasang code HTML nya saja dari Foto tsb

<div id="spoiler">
<div>
<div color="transparent" id="show" style="border-style: solid; border-width: 1px; display: none; margin: 0px; padding: 4px; width: 98%;">
</div>
<div id="spoiler">
<div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" style="margin: 10px; padding: 0px; width: 100px;" type="button" value="Show Spoiler!" />
<div id="show" style="border-style: solid; border-width: 0px; color: black; display: none; margin: 0px; padding: 4px; width: 98%;">
Bagian ini adalah Bagian ISI dari spoilernya...kalau anda mau memposting gambar/foto,cukup pasang code HTML nya saja dari Foto tsb
</div>
</div>
</div>
</div>
</div>

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Spoiler Gambar

Disini saya mempunyai Code HTML dari sebuah Gambar yang saya hosting di Tinypic

berikut Kode HTMLnya

<a href="http://tinypic.com?ref=33tnuv6" target="_blank"><img src="http://i31.tinypic.com/33tnuv6.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

Opss.... Gambarnya terlalu Besar Tidak sesuai dengan Halaman Posting..tapi tidak apa-apa deh, cuma sedekar Contoh :D

Sekian Semoga Bermanfaat kawan :D

Jika anda kesulitan dalam penerapan spoiler di blog anda. saya akan mencoba untuk membantu sebisa saya :D