Rabu, 08 Juni 2011

Kode HTML spoiler di blogspot

Pengguna blogger/blogspot dari google, sebelum ke pokok artikel ini New BerryMor akan menjelaskan sedikit tentang spoiler ini. Spoiler dibuat dengan menggunakan javascript button. Sedangkan untuk menyembunyikannnya digunakan properti CSS display, seperti, "display:none;". Fungsinya ada banyak sekali, diantaranya untuk memperpendek teks, menyembunyikan gambar yang besar dan panjang dan memakan space halaman atau bisa disebut menyembunyikan konten dan lain-lain, sehingga tampak spoiler.


Lihat contoh yang New BerryMor praktekkan,dan klik spoiler dibawah ini :





Untuk contoh kode HTML spoilernya dibawah ini silakan salin jika mau :

<div id="spoiler" style="display:none">
Konten kamu disini
</div>
<button title="Clik for open and close" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open | Close</button>

Catatan New BerryMor tentang menggunakan kode HTML spoiler ini :
  • Ganti Konten kamu disini (text, url, url gambar, script dan lain-lain) yang ingin disembunyikan.
  • Ganti title Clik for open and close dengan title yang kamu inginkan. Title berfungsi memberi informasi ketika mouse di hover atau disorot di tombol spoiler.
  • Ganti Open | Close dengan teks sesuai keinginan, teks tersebut akan menjadi perintah yang terlihat pada tombol spoiler.

Bagaimana!,sudahkah kamu praktekkan?,jika belum, silakan praktekkan dan berkreasi semoga berhasil ;)

Tidak ada komentar:

Posting Komentar