Menyembunyikan Gambar di Postingan Seperti di Situs Kaskus

Jika anda pernah membuka situs kaskus.com. Mungkin anda tidak asing dengan gambar-gambar maupun tulisan disana yang tersembunyi di dalam sebuah tombol. Setiap kali kita ingin melihat foto maupun teks tambahan, kita umumnya menekan sebuah tombol terlebih dahulu di artikel tersebut, kemudian gambar atau teks tersebut baru muncul. Nah, tahukah anda bahwa kurang lebih kita juga bisa membuat tombol seperti itu pada artikel yang kita miliki di blog.

Menyembunyikan gambar di postingan dengan cara seperti ini, mungkin bisa menjadi salah satu alternatif agar blog terlihat menjadi lebih rapi, maupun sebagai antisipasi karena artikel yang terlalu panjang. Sebagai gambaran terkait apa itu menyembunyikan gambar di sebuah artikel, anda bisa melihat contoh gambar berikut ini :

Cumi-cumi Transparan
Ditemukan di samudera belahan bumi selatan, Cumi-cumi kaca (Teuthowenia pellucida) memiliki organ yang ringan di atas matanya dan memiliki kemampuan untuk melingkar menjadi bola, seolah-olah landak yang hidup di air. Cumi-cumi ini merupakan mangsa dari banyak ikan laut-dalam (seperti hiu goblin) dan juga paus dan burung-burung laut.

Spoiler

Jika anda tertarik membuat hal seperti itu pada blog yang anda miliki. Maka anda bisa mengikuti cara berikut ini :
Copi Paste Script Berikut ini pada Artikel yang anda inginkan (Mode HTML - Bukan Compose)

 <div id="spoiler"><div>
<input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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'; }" name="button" type="button" value="LIHAT GAMBAR" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="https://lh3.googleusercontent.com/-gZw3y9-Llxg/VNW2IDOeYwI/AAAAAAAACWg/ZGfq2lpllnY/w490-h296-no/Cumi-cumi%2BTransparan.jpg" alt="monyet" width="400" height="241" />
</div><div id="hide"></div></div></div>

Kode Berwarna Merah Merupakan Tulisan Yang Tampil di Kotak
Tulisan Berwarna Biru adalah URL gambar yang ingin di Tampilkan
Tulisan Berwarna Hijau adalah Ukuran Lebar dan Tinggi gambar yang di inginkan

Anda bisa mengatur beberapa hal tersebut. Sesuaikan dengan baik, terutama kesesuaian ukuran lebar dan tinggi gambar, agar tampilan gambar memiliki perbandingan gambar yang sama dengan ukuran gambar aslinya.

Baca Juga :
Menyembunyikan Gambar di artikel seperti kaskus
Menyembunyikan Tulisan di Artikel Seperti Di Kaskus
Membuat Galeri Blog Slide Show bertombol di Blog
Mengubah Gambar menjadi PDF dengan NitroPDF
Memperkecil Foto tanpa mengurangi kualitas
Cara membuat gambar Zoom di Blog
Daftar Artikel Blog