Para blogger menyebut susunan JavaScript ini sebagai "Spoiler", atau untuk mudahnya saya sebut saja sebagai "Widget Buka Tutup" agar lebih mudah dipahami. Fungsinya yang paling signifikan (menurut saya) adalah untuk menghemat ruang atau space pada sebuah situs. Anda dapat "menyembunyikan" apa saja dengan spoiler ini, baik itu Script JavaScript ataupun file gambar. Cara kerjanya bisa dikatakan "mirip" dengan tempat tidur yang bisa dilipat dan ditempelkan / dimasukkan / disembunyikan kedalam tembok, sehingga ruangan akan terlihat lebih lapang dan rapi. Anda bisa membayangkannya kan? Atau malah gak ngerti maksud saya? Waduh... bagaimana cara menjelaskannya ya..
Begini, anda klik aja tombol "BUKA" dan lihat sendiri hasilnya ya. Pada contoh 1 saya isi dengan gambar, sedangkan pada contoh 2 saya isi dengan Script Cbox (Guest Book). Semoga dengan begini anda lebih mudah untuk mencerna dan memahami apa yang saya tulis.

Contoh 1





Contoh 2


Sudah jelas bukan, apa itu Spoiler dan bagaimana cara kerjanya? Nah, sekarang tinggal membahas cara pemasangannya. Sederhana saja, cara pemasangannya sama dengan saat anda memasang JavaScript widget yang lain.
1. Masuk ke blogger
2. Masuk ke Tata Letak, kemudian pilih Rancangan
3. Langkah ke 3, pilih Tambah Gadget
4. Kemudian pilih HTML/JavaScript (+) lalu copy kode berikut dan masukkan kode pada kotak JavaScript widget.
<center><div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Contoh 1</span><br/>
<input value="B U K A" style="margin: 0px; padding: 0px; width: 100px; font-size: 12px;" 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 = 'T U T U P'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'B U K A'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

SISIPKAN GAMBAR, VIDEO, SCRIPT DISINI..!!


</div></div></div></div></center>
5. Selesai
Jika anda menginginkan spoiler tanpa border (seperti yang saya contohkan), ganti angka 1 dengan 0 (nol)
Saya yakin anda lebih memahami dimana seharusnya spoiler ini dipasang di situs anda. Silahkan ganti tulisan Contoh 1 dengan judul yang anda inginkan, begitupun dengan tulisan BUKA maupun TUTUP dengan kata yang anda kehendaki. Selamat mengutak-atik script-nya ya.. Jangan lupa komentar loh, wajib tuh.. hehehe..
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Comments are closed.