Ditulis oleh: Ditulis pada: 5/11/2014
Selain isi konten yang original dan menarik ketika membuat sebuah postingan, tentunya akan lebih baik lagi jika tampilan postingannya lebih aktraktif sehingga akan lebih menarik pengunjung untuk membacanya.
Salah satu hal yang bisa kita buat di dalam postingan yaitu tombol show and hide. Kita bisa menyembunyikan teks atau gambar dengan ini, kemudian pengunjung bisa melihat gambar atau teks yang kita sembunyikan dengan meng-klik tombolnya.
Banyak jenis show hide div ini, dan di sini saya akan share cara membuat salah satunya yaitu show hide div yang sederhana di postingan seperti yang bisa Anda lihat pada gambar gif di bawah ini.
Bagi yang mau mencobanya silahkan gunakan kode HTML di bawah ini, silahkan gunakan pada post editor HTML.
<div id="Button" style="margin:0 auto;text-align:center">
<input type="button" onclick="document.getElementById('Content').style.display='block';Button.style.display='none';" value="Get The Code Here" />
</div>
<div id="Content" style="display:none;width:300px;padding:10px;margin:0 auto;border:1px solid #aaa;text-align:center;box-shadow: 0px 1px 3px 0px rgba(179,179,179,1);background:#fff">
<p>
SILAHKAN SIMPAN TEKS ATAU GAMBAR DI SINI
</p>
<input type="button" onclick="document.getElementById('Content').style.display='none';Button.style.display='block';" value="✖" />
</div>
Cukup sederhana bukan? Silahkan ganti kode Get The Code Here dengan apa saja yang Anda mau. Dan silahkan ganti SILAHKAN SIMPAN TEKS ATAU GAMBAR DI SINI dengan teks atau gambar yang ingin Anda sembunyikan.
Dan perhatikan lebar Content pada kode ini width:300px bisa Anda ganti angkanya sesuai keinginan Anda seperti di bawah ini.
Jika kita kreatif, ini juga bisa kita jadikan trik untuk membuat ucapan terima kasih setelah klik tombol download seperti pada postingan saya yang lalu.