Cara Membuat Spoiler

Sudah lama juga saya tidak mengupdate blog ini, sampi-sampai semua pengetahuan standarku akan dunia blogger sudah hilang. Pada postingan ini saya akan mencoba membahas tentang tata cara membuat spoiler, walaupun sebenarnya tutorial seperti ini sudah basi tetapi ku akan mencoba menyajikannya buat teman yang belum tahu.

Apakah spoiler itu sendiri ???

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler. (berlaku juga untuk web)

Pada blog-blog tertentu terkadang menggunakan Spoiler untuk menyembunyikan beberapa konten pada sidebar semisalnya Daftar Link, Daftar Isi, dll. Terkadang juga spoiler kita temukan pada postingan untuk menyembunyikan gambar atau video.



Contoh Spoiler:









1. Masuk ke account blogger anda.
2. Pilih tata letak/layout


3. Pilih tambah gadget




4. Pilih HTML/javascript.




5. Kopas kode di bawah ini



<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Lihat" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" 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 = 'Lihat'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">


Letakkan kode script, HTML dan teks anda disini



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




Simpan/save dan lihat hasilnya.


Catatan :
  1. Untuk tulisan Lihat dan Close bisa sobat ganti sesuai keinginan.
  2. Width : 55px untuk lebar spoiler.
  3. Font-size: 11px untuk besar tulisan pada kotak spoiler.
  4. Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Selamat mencoba ! Happy


Share on Google Plus

About Fais Wahid

Saya saat ini seorang mahasiswa strata 1 Geofisika di Universitas Hasanuddin yang mencoba untuk berbagi pengetahuan saya walau pun saya sendiri juga masih belajar.