VPS Hosting MurahWebsite Ini Dalam Perlindungan Allah SWT

Cara Membuat Spoiler Buka Tutup Gambar di Blog

Halo juragan… Spoiler pada blog adalah sebuah format bingkai yang digunakan untuk membingkai atau menyembunyikan teks, gambar, video maupun apa saja agar bisa disembunyikan di blog. Nantinya pengunjung bisa melihat isi spoiler tersebut dengan cara meng-klik tombol buka tutup atau “Show-Hide”.Spoiler ini bermanfaat untuk meringankan loading blog. Jika anda mengupload banyak gambar di postingan, maka anda sebaiknya memasukkan gambar-gambar tersebut ke dalam spoiler agar loadingnya blog menjadi ringan. Selain itu postingan anda akan tampak praktis dan keren.

Contoh spoiler bisa anda lihat dibawah ini;

[spoiler title=’Buka spoiler’ collapse_link=’true’]

Maria-Ozawa

[/spoiler]

( ? ) Selain bisa dipasang di area postingan, spoiler ini juga bisa anda pasang di sidebar blog.

Berikut ini kode spoiler;

<div style=”margin: 5px 20px 20px;”>
<div class=”smallfont” style=”margin-bottom: 2px;”><b>Judul Spoiler</b>: <input value=”Buka” style=”margin: 0px; padding: 0px; width: 55px; font-size: 12px;” 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’; }” type=”button”>
</div>
<div class=”alt2″ style=”border: 1px inset ; margin: 0px; padding: 6px;”>
<div style=”display: none;”>
Teks atau Kode Script (gambar/video)
</div>
</div>
</div>

Cara memasangnya;

1. Upload gambar di entry baru seperti biasanya.

2. Setelah gambar terupload, buka HTML di entry baru (bukan Compose)

3. Kemudian letakkan kode spoiler di tempat yang anda kehendaki, lalu pindahkan script gambar yang telah anda upload tadi ke tengah spoiler. Contohnya bisa anda lihat dibawah ini;

<div style=”margin: 5px 20px 20px;”>
<div class=”smallfont” style=”margin-bottom: 2px;”>
<b>Judul Spoiler</b>: <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: 0px; padding: 0px; width: 55px;” type=”button” value=”Buka” />
</div>
<div class=”alt2″ style=”border: 1px inset; margin: 0px; padding: 6px;”>
<div style=”display: none;”>
<div class=”separator” style=”clear: both; text-align: center;”><a href=”http://4.bp.blogspot.com/-9MapqPaggzQ/UmWHVi9pqbI/AAAAAAAAFRE/GHzeCCHXnKg/s1600/My+Picture.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ height=”300″ src=”http://4.bp.blogspot.com/-9MapqPaggzQ/UmWHVi9pqbI/AAAAAAAAFRE/GHzeCCHXnKg/s400/My+Picture.jpg” width=”400″ /></a></div>
</div>
</div>
</div>

4. Kembali ke Compose dan klik Publish. Selesai.

Keterangan;

( i ) Kode warna merah itu adalah script gambar. Anda juga bisa memasukkan lebih dari satu gambar ke dalam satu spoiler, atau bisa juga menambahkannya teks, menambahkan script video atau script apa saja.

Untuk memasangnya di sidebar; 
Anda tinggal pastekan kode spoiler beserta sript gambar atau video di gadget HTML, lalu tempatkan di sidebar. Namun anda harus menyesuaikan ukuran lebar gambar atau video lebih dulu agar sesuai dengan lebar sidebar anda.

Begitulah, semoga bermanfaat. Jangan lupa baca juga:

61 Comments

Add a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.