Cara Membuat Spoiler Bengkel Blog

Oleh Syafdillah

11 April 2016

Spoiler - Siapa yang tidak tahu spoiler, apalagi mereka yang sering nongkrong di KASKUS (Kasak Kusuk). Di Kaskus banyak sekali postingan yang memuat gambar-gambar yang biasanya digunakan untuk jual beli barang. Agar tampilan postingan lebih menarik maka digunakan spoiler, apalagi postingan yang melulu gambar dan gambar agar postingan menjadi teratur dan rapih.

Kali ini saya ingin membagi widget spoiler yang sudah Responsive dan SEO Friendly. Penggunaannya cukup mudah, jadi apabila Anda ingin menampilkan gambar di postingan. Anda cukup meletakkan kode HTML di bawah ini.

<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: left;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 100px;" type="button" value="lihat gambar" /> </div>
<div style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="text-align:center;">

<img style="text-align:center;border:1px solid #809FFE;background:#FEE680;padding: 8px;" title="Cara Membuat Spoiler Bengkel Blog" alt="Cara Membuat Spoiler Bengkel Blog" src="" height="300" width="100%" />

</div></div></div></div>

Pada tombol buka - tutup spoiler "lihat gambar" bisa anda ganti sesuai keinginan.
Pada scr="..." anda bisa memasukan url gambar, dan title="..." anda bisa memasukan judul gambar, alt="..." anda bisa masukan judul gambar.

Untuk ukuran Tinggi dan lebar gambar, anda bisa sesuaikan. Di sini untuk lebarnya saya gunakan ukuran responsive (100%). dan biasanya hanya menyesuaikan lebar gambar saja.

Ayo Like Facebooknya

Tag : Blogging