Tips Cara Menambahkan Spoiler Gambar pada Blogspot

Ditulis oleh: -
Pernahkah sobat berkunjung ke situs kaksus yang para penggunanya sering di sebut kaskuser..?. Saat saya berkunjung ke sana memang sangat ramai user dan visitornya. Dan yang membuat saya penasaran adalah saat melihat salah satu postingannya yang gambarnya di sembunyikan atau di kasih spoiler. Nah spoiler tersebut juga bisa kita terapkan di postingan blogspot. Bagaimana caranya..?, berikut ulasan tentang cara membuat spoiler pada postingang blogspot.
Untuk membuat spoiler tulisan atau gambar di artikel blog silahkan sobat membuat atau menulis entri post di bagian HTML, bukan di compose nya lo. Selanjutnya sobat masukkan kode spoilernya berikut ini.

<div id="spoiler">
<div> 
<input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="LIHAT" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"> <img alt="spoiler pada blogspot" class="aligncenter" height="179" src="https://lh4.googleusercontent.com/-lLZsc_Yr1bw/UUnKYC31qKI/AAAAAAAAAIU/Qi27sNK6F_Q/s179/mantab+gan+gif.gif" width="136" /> </div> <div id="hide"> </div> </div>

Tambahan : Tulisan LIHAT dan TUTUP bisa sobat ganti sesuai selera. Sedangkan height/tinggi gambar dan width/lebar gambar silahkan sobat sesuaikan dengan tinggi dan lebar dari gambar yang akan di kasih spoiler. Dan untuk url yang saya kasih tanda merah itu adalah url dari gambar yang sudah di upload dan merupakan gambar yang di kasih spoiler. Jika prosesnya benar maka hasilnya akan tampak seperti contoh di bawah ini.
Contoh Spoiler Gambar.
Selain akan merapikan artikel postingan, kata para temen-temen blogger saya fungsi dari spoiler ini juga akan sedikit mringankan load dari blog jika postingannya berisi gambar dalam jumlah banyak. Okey sobat semoga sedikit ulasan ini bisa bermanfaat, jika ada salah mohon sobat koreksi dan memberikan saran, kritik serta masukan dengan mengisinya di kolom komentar. Terimakasih.
Advertisement

18komentar:

  1. Replies
    1. Sore mas rama, maaf baru bisa balas karena banyaknya kesibukan saya.

      Delete
  2. Dengan spoiler akan menghemat tempat. terimakasih atas ilmunya.

    ReplyDelete
    Replies
    1. Semoga bermanfaat ya mas dan terimakasih atas kunjungannya.

      Delete
  3. kunjungan sob,mantap nih tutorialnya,terima kasih sudah berbagi,oh yua sekalian follow saja,kalau sobat sudi silahkan follow balik ya.

    ReplyDelete
    Replies
    1. Siap mas. Terimakasih atas support dan silaturahminya.

      Delete
  4. dengan spoiler loading blog jadi lebih ringan.. kereeenn..

    ReplyDelete
  5. Wahh.. ilmu bagus nih,, makasih sharingnya gan :)

    ReplyDelete
  6. keren juga ya , aku mau coba deh

    ReplyDelete
    Replies
    1. Silahkan mbak vina dan semoga bermanfaat.

      Delete
  7. Memperingan loading blog jika terdapat banyak pic ya? Spoiler mantap. Mau kucoba di blog nih. Thanks infonya. Kunjungi balik blog saya .

    joemulyono.blogspot.com

    ReplyDelete
    Replies
    1. Betul mas tips pemasangan spoiler bisa untuk menata postingan yang banyak gambarnya biar lebih tertata dan menarik.

      Delete
  8. patut dicoba, spoiler memang dapat meringankan loading dan juga menghemat tempat. yang pakai gambar begini memang asyik.

    ReplyDelete
  9. mantab spoilernya... sundul gan... hehehe

    ReplyDelete