Cara Membuat Memasang Spoiler Buka Tutup Gambar untuk Postingan Blog

Membuat Spoiler untuk Postingan Blog - Ini berguna untuk mempercepat loading page blog kita selain menghemat ruang, juga terlihat lebih bagus untuk postingan tertentu. Spoiler buka-tutup adalah format bingkai yang digunakan untuk menyembunyikan gambar atau text atau lainnya, bahkan video. Di dalam spoiler ini bisa dimuat banyak dan juga bisa dicampur beberapa file yang berbeda.

Berikut ini adalah contoh spoiler:
Ruangtransit.blogspot.com:
DISINI TEMPAT TEXT ATAU SCRIPT GAMBAR/VIDEO DIMASUKKAN
Kita juga bisa membuatnya bertingkat (spoiler dalam spoiler) seperti di bawah ini,

Ruangtransit.blogspot.com:
Rangkap dua:
TEXT ATAU SCRIPT GAMBAR/VIDEO ATAU LAINNYA
Pada postingan ini saya akan membagikan Cara Membuat dan Memasang Spoiler tersebut, sebagai contoh saya membuat spoiler berisi sebuah gambar. Tampilannya bisa anda lihat dengan menekan tombol "VIEW" di bawah ini:

Nanti lihat lagi,..
Sekarang ikuti dulu langkah-langkah untuk membuat spoiler.
Caranya:
>> Buka blogger > Buat postingan baru dalam mode HTML jangan Compose
>> Copy HTML di bawah ini dan paste-kan di lembaran postingan anda

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Ruangtransit.blogspot.com</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 = 'HIDDEN'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="VIEW" />
    </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
TEXT ATAU SCRIPT
</div>
</div>
</div>

Publish, selesai.
Namun agar sesuai minat, edit terlebih dahulu sebelum dipublish

>> Jika tidak ingin ada text di samping tombol spoiler, hapus tulisan berwarna hijau
>> Untuk memasukkan gambar, hapus tulisan TEXT ATAU SCRIPT dan upload gambar seperti biasa
      yaitu dengan cara klik simbol bergambar di sebelah tulisan "Link" dan pilih file.
>> Sehingga pada contoh, HTML menjadi seperti di bawah ini:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
 <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 = 'HIDDEN'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'View'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="VIEW" />
    </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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHpmMYfpHtN4B2xggCpST6TXMco9w3-rKEfVBUtN7UiB-Pd4lkR7Inu1iNOOrM8PEy0TAbgyO-VpYICy7ZrAX8gRyjtNQZgWYP0vgOMUaGg-lsh-f9WsukovBVx2pLg9s10HAPdkcnga8/s1600/Buka-atau-Tutup.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHpmMYfpHtN4B2xggCpST6TXMco9w3-rKEfVBUtN7UiB-Pd4lkR7Inu1iNOOrM8PEy0TAbgyO-VpYICy7ZrAX8gRyjtNQZgWYP0vgOMUaGg-lsh-f9WsukovBVx2pLg9s10HAPdkcnga8/s400/Buka-atau-Tutup.jpg" /></a></div></div>
</div>
</div>

Text warna biru di atas adalah script dari gambar yang saya upload, setiap file akan akan beda script-nya. Dan itu terjadi secara otomatis.

Silahkan dicoba Semoga Berhasil.

Gibran
ruangtransit.blogspot.com

Postingan terkait:

Belum ada tanggapan untuk "Cara Membuat Memasang Spoiler Buka Tutup Gambar untuk Postingan Blog"

Post a Comment