membuat tombol menampilkan dan menyembunyikan gambar

Posted by Unknown Posted on undefined - undefined - undefined 0 komentar


Spoiler merupakan suatu tombol yang segaja dibuat untuk menyembunyikan dan menampilkan entah itu gambar, teks, link, dan sebagainya. Berikut ini beberapa manfaat dari Spoiler :
  1. Membuat orang penasaran apa yang ada di dalam Spoiler tersebut
  2. Jika pada postingan kita banyak sekali Gambarnya maka gambar-gambar tersebut bisa kita buatkan Spoiler agar Loading blog lebih cepat.
  3. Menghemat tempat
  4. Postingan kita bisa tampil Unik dan keren
  5. Dan masih banyak lagi manfaat dari Spoiler.

<div id="spoiler" style="display:none">
Konten Yang Disembunyikan
</div>
<button title="Klik untuk melihat/menyembunyikan" type="button"
onclick="if(document.getElementById('spoiler') .style.display=='none')
{document.getElementById('spoiler')
.style.display=''}else{document.getElementById('spoiler')
.style.display='none'}">Buka/Tutup</button>

keterangan : 
  1. Ganti "Konten Yang Disembunyikan" dengan konten (text, url, url gambar, script dll) yang ingin disembunyikan.
  2. Ganti title "Klik untuk melihat/menyembunyikan" dengan title sekehendak anda. Title berfungsi memberi informasi ketika mouse di hover di atas tombol spoiler.
  3. Ganti "Buka/Tutup" dengan teks sesuai keinginan, teks tersebut akan menjadi perintah yang terlihat pada tombol spoiler.



pasangkan spoiler di HTML caranya Edit HTML kemudian pasangkan skrip tersebut di bagian body atau menu samping sesuai keinginan anda.
Jika ingin membuatnya di widget, pilih menu "HTML/Javascript" kemudian pasangkan skrip tersebut .

contoh implementasinya

  skrip:
<div id="spoiler" style="display:none">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilU3WafB-Qq2opMs6TjjT2Hk5Xvh-Blxs-sY-fKISPAjXoubYj_D79UfDE82cu2OoVXesiyza_A6OTxvVZasweVXeA7H8F-CCuQHo3KMEyxVS1_OfdcJBxSCaqiAnZ4gs3hCU8WxP5ckhF/s1600/sfesf.jpg" />
</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>

 hasil




Semoga Bermanfaat,