Berjumpa lagi dengan blog-triks,
kali ini saya akan memberitai eh memberitahu bagaimana cara membuat
spoiler di blogger,saya tulis ini karena banyak pertanyaan lewat pesan
facebook Setelah postingan saya Cara Membuat Stripe Bar Blogger saya kasih spoiler pada bagian akhirnya. Semua pasti sudah tahu apa itu spoiler kan? Spoiler itu kaya gini contohnya
Judul Spoiler:
Diatas tadi adalah contoh spoiler,
fungsi utama spoiler adalah mengurangi beban loading page, biasanya yang
dimasukin ke dalam spoiler adalah image dengan resolusi besar, jadi
dengan spoiler image tidak akan diload secara langsung yang dapat
mempercepat waktu loading. Fungsi lainnya tentu dengan spoiler kita
dapat menghemat space dan posting terlihat lebih rapi. Sekian dulu
basa-basinya, langsung saja kita lihat bagaimana cara membuat spoiler
dibawah ini:
caranya mudah sekali, tinggal masukin saja kode html berikut ini
caranya mudah sekali, tinggal masukin saja kode html berikut ini
Cara Membuat Spoiler :
<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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2
</div>
</div>
</div>
<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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Masukkan isi spoiler disini, dapat diisi gambar, kode html, paragraf dan lain2
</div>
</div>
</div>
Semoga bermanfaat ya :)
Tidak ada komentar:
Posting Komentar