Berikut ini adalah contoh spoiler:
Ruangtransit.blogspot.com:
Ruangtransit.blogspot.com:
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
Belum ada tanggapan untuk "Cara Membuat Memasang Spoiler Buka Tutup Gambar untuk Postingan Blog"
Post a Comment