Java Script SPOILER

hello....
kali ini saya akan menerangkan Java Script....
pasti kalian udah pernah make yang namanya Java Script ini, mungkin kalian ga sadar bahwa kalo kita naro foto, video, dan link di blog kita make yang nama si Java Script itu tapi karena fasilitas blog sekarang makin canggih jadi kita tinggal klik-klik doang deh.....
mungkin kalo java script foto, video dan link kayanya tinggal di klik aja deh tapi ada juga yang kalo kita mau taro di blog kita harus pake Java Script yaitu SPOILER.......
yup namanya adalah spoiler, si spoiler ini si sebenernya bertugas untuk menghemat bandwith kita saat membuka blog biar jadi ga berat/lambat......
contohnya kalo kita masang foto sebesar 1mb di blog kita kan pasti loadingnya jadi super lelet nah si spoiler inilah berkerja untuk menghiden foto tersebut dan pas kita klik baru deh fotonya di loading, jadi kalo kita ga mau liat foto itu kita ga perlu buang-buang bandwith.....
nah sekarang kita akan belajar membuat si spoiler tersebut, sebenernya si tinggal copas aja jadi intinya hanya butuh ketelitian......
ini adalah Java Script yang kita butuhkan untuk membuat spoiler (untuk blogspot saja soalnya wordpress ga support) :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Spoiler</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;">

contoh isi tulisan kita

</div></div></div></div>


jadinya bakal kaya gini deh :

Judul Spoiler

contoh isi tulisan kita

nb : kalo mau pasang foto kita tinggal copas Java Script foto tersebut terus taro "di contoh ini tulisan kita"
dan kalo di blogspot tinggal klik tulisan insert image yang ada di "Compose/Tulis" trus klik "Edit HTML" trus copas deh link aneh yang ada disitu
kalo masih bingung gini deh contohnya :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul Spoiler</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;">

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_f3cpP6eYnunMHyMULYT5Ph5z_Vql0fcmSYDY-dCxGp5DCZIVwgebPdIJ72B3ednmgxCtJEVTzsOD4D57NW6JzvRkG09GpaUxOSoOAgB-2-TWKtGwA3yuC0YdxRwzORUxuk6HVARQC1z/s400/most-expensive-bass-guitar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_f3cpP6eYnunMHyMULYT5Ph5z_Vql0fcmSYDY-dCxGp5DCZIVwgebPdIJ72B3ednmgxCtJEVTzsOD4D57NW6JzvRkG09GpaUxOSoOAgB-2-TWKtGwA3yuC0YdxRwzORUxuk6HVARQC1z/s320/most-expensive-bass-guitar.jpg" width="320" /></a></div>

</div></div></div></div>

nah si :

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_f3cpP6eYnunMHyMULYT5Ph5z_Vql0fcmSYDY-dCxGp5DCZIVwgebPdIJ72B3ednmgxCtJEVTzsOD4D57NW6JzvRkG09GpaUxOSoOAgB-2-TWKtGwA3yuC0YdxRwzORUxuk6HVARQC1z/s400/most-expensive-bass-guitar.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_f3cpP6eYnunMHyMULYT5Ph5z_Vql0fcmSYDY-dCxGp5DCZIVwgebPdIJ72B3ednmgxCtJEVTzsOD4D57NW6JzvRkG09GpaUxOSoOAgB-2-TWKtGwA3yuC0YdxRwzORUxuk6HVARQC1z/s320/most-expensive-bass-guitar.jpg" width="320" /></a></div>

didapet setelah kita insert image di "Compose/Tulis" dan kita klik "Edit HTML"
dan jadinya kan seperti :

Judul

nah trus kalo video dan link gmana ???
ya tinggal klik insert video atau insert link trus klik "Edit HTML" selesai deh
Jadi inti dari semua ini adalah kita harus insert foto dll di "Compose" lalu kita pindah ke "Edit HTML"
lalu copas Java Script diatas dan edit formatnya seperti diatas dan jangan lupa pas ngedit/paste Java Scriptnya kita harus ada di "Edit HTML" soalnya kalo ngga nanti Java Script kita ga kebaca....
kalo bingung langsung aja tanya di "Chat Box"....
thank you very much.....