Cara Menyembunyikan Gambar Pada Postingan Blog

Mungkin kalian sering melihat pada sebuah blog atau web, ada sebuah gambar yang di sembunyikan dan untuk melihatnya anda harus mengklik kata view, lihat gambar atau dengan kata lainnya.

Membuat gambar tersembunyi bisa menjadi suatu alternatif bagi sebuah artikel yang terdapat banyak gambar, sehingga artikel tidak terlihat panjang.
Saya akan menjelaskan bagaimana cara untuk menyembunyikan suatu gambar pada artikel blog.

Sebagai sebuah contoh, klik "Lihat Gambar" di bawah ini untuk melihat gambar yang saya sembunyikan dan tutup gambar dengan cara klik "Tutup".

Tanpa basi basa, berikut langkah-langkahnya :

Masuk ke Blog

Klik Entri Baru

Pada kolom Compose tulis artikel yang hendak anda posting.

Pada saat anda hendak memasukan gambar yang mau di sembunyikan klik HTML

Pastekan kode script di bawah  artikel yang tadi telah kalian buat.

<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 Gambar'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="Lihat Gambar" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img alt="mapk" class="aligncenter" height="auto" src="https://lh3.googleusercontent.com/-3QJgdHS_3YQ/WSTC5A4Uf0I/AAAAAAAAGQQ/JaQqA-42ZXUGOBqSXoe3OQj_uFgWFbiRgCEw/w140-h47-p/cooltext244893572103657.png" width="auto" />
</div>
<div id="hide">
</div>
</div>

Keterangan:

* Tulisan yang berwarna merah merupakan teks untuk tampilan pada kotak untuk lihat dan                     tutup     (view/close), 

   Kalian bisa mengubahnya sesuai keinginan.

* Tulisan yang berwarna hijau merupakan ukuran/size gambar yang akan ditampilkan nantinya, 

   Kalian bisa menyesuaikan ukurannya.

* Tulisan yang berwarna biru adalah url/link gambar yang akan disembunyikan. 

   Anda ganti dengan url gambar Anda yang ingin disembunyikan pada postingan blog.

Setelah kode script di pastekan, klik Pratinjau untuk melihat apakah tombol "Lihat Gambar" sudah muncul dan untuk mengatur posisi tombol "Lihat Gambar" anda bisa mengaturnya di kolom Compose. (pada kolom compose hanya terlihat garis kecil abu-abu tegak lurus bukan tulisan lihat gambar)

Untuk melihat gambar bisa terlihat setelah tombol Lihat Gambar di klik, artikel sudah harus di Publikasikan.

Semoga bermanfaat dan selamat mencoba.