Cara Menyembunyikan Gambar pada Postingan Blog

Menyembunyikan Gambar pada Postingan Blog, berbicara soal menyembunyikan gambar di artikel blog mungkin Anda pernah melihat pada suatu blog atau web ada gambar yang disembunyikan pada suatu postingan atau artikel dan untuk melihatnya Anda harus mengklik pada kata view, lihat gambar, spoiler ataupun kata lainnya dan sama halnya untuk menutupnya kembali Anda harus mengklik pada kata close, tutup, sembunyikan ataupun kata lainnya. Hal tersebut adalah hal sederhana yang ada pada suatu artikel di blog namun hal tersebut akan membuat blog sobat terlihat lebih rapi, elegan dan terlihat seperti professional.

Membuat gambar tersembunyi bisa menjadi suatu alternatif bagi sebuah artikel yang panjang dan terdapat banyak gambar. Nah sekarang saya akan menjelaskan bagaimana cara untuk menyembunyikan suatu gambar pada artikel blog agar pada blog kita juga bisa seperti itu, mungkin tutorial ini juga sudah banyak diluaran sana namun tetap saja pasti berbeda dalam penyampaian tutorialnya. Sebagai sebuah contoh agar Anda tidak penasaran, bila lihat gambar dibawah ini dengan cara klik "Lihat Gambar" dan menutupnya dengan cara klik "Tutup".

Gambar diatas adalah sebuah logo kelas pada saat saya kuliah dengan nama MAPK (Management Administrasi Pelayanan Kesehatan)

Bila Anda tertarik dan ingin membuat gambar tersembunyi seperti pada contoh diatas maka perhatikan cara membuatnya dibawah ini dan pahami supaya tidak mudah lupa.

Cara Menyembunyikan Gambar pada Postingan Blog

Untuk menyembunyikan gambar pada postingan blog pada artikel ini kita akan menggunakan sebuah script dan untuk mencobanya sendiri Anda bisa ikuti langkah-langkah berikut.

1. Pertama Anda perhatikan script berikut dan salin script untuk membuat gambar tersembunyi pada artikel blog.


<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihxcmGRPVGIyxDuosRtJr4OWYwGaYgMYUoWHWZ-cdLUCJny-WhFwd82HcQ-cyJqpdhCu0oNVpu2HqE01uDqRi2N9U4zGgtL8W7_byd6xCsTg9oSGSc3gAY5c6v1grbDYDYGzzxraIcvGA/s1600/mapk.jpg" width="auto" />
</div>
<div id="hide">
</div>
</div>


• Tulisan yang berwarna merah merupakan teks untuk tampilan pada kotak untuk lihat dan tutup (view/close), Anda bisa mengubahnya sesuai keinginan.
• Tulisan yang berwarna hijau merupakan ukuran/size gambar yang akan ditampilkan nantinya, Anda bisa menyesuaikan ukurannya.
• Tulisan yang berwarna biru adalah url/link gambar yang akan disembunyikan dan ditampilkan, Anda ganti dengan url gambar Anda yang ingin disembunyikan pada postingan blog.
2. Setelah menyalin script diatas, Anda tempel pada mode HTML di sebuah artikel yang akan diposting dengan menggunakan gambar yang akan disembunyikan. Sesuaikan script seperti pada penjelasan diatas. Lakukan semua langkah untuk setiap gambar yang ingin disembunyikan.



(Gambar HTML pada Blogger)


3. Setelah artikelnya selesai dan gambar yang ingin disembunyikan sudah mengikuti langkah yang dijelaskan, maka Anda sudah bisa mempublish artikelnya pada blog.

Baca juga "Cara Menyembunyikan Teks pada Postingan Blog"

Script yang saya berikan diatas harus Anda edit atau ubah pada teks yang sudah saya beri warna dimulai dari tulisan view/close, size gambar dan juga tentunya url gambar karena jika tidak mengubahnya maka yang akan muncul adalah gambar logo mapk punya saya, bukan gambar yang Anda ingin sembunyikan pada artikel blog.

Apabila Anda mengerti dan mengikuti langkahnya dengan benar maka tutorial Cara Menyembunyikan Gambar pada Postingan Blog akan berhasil dilakukan, namun apabila tidak atau belum mengerti Anda bisa menanyakan kepada saya di komentar atau menghubungi saya di Kontak blog, terima kasih.