Untuk menghemat tempat sebuah tulisan dalam postingan ada dua cara yang bisanya dilakukan, yang pertama adalah membuat scroll bar dan yang kedua adalah membuat spoiler. Cara membuat scroll bar telah kita pada posringan sebelumnya, Jika Anda belum sempat membacanya klik Disini.
Sekarang kita akan membahas spoiler di
blog. Apa itu spoiler di blog ? Spoiler adalah sebuah tombol untuk
menyembunyikan atau menyingkat tempat sebuah konten baik, baik berupa teks,
gambar dan video dengan sistem buka tutup atau open/close. Contohnya bisa Anda
lihat di akhir postingan.
Cara membuatnya !!!
- Login ke Blogger
- Pilih New Post atau Entri Baru seperti membuat postingan biasa
- Pilihlah pada mode Edit HTML saat membuat postingan
- Gunakan kode script berikut ini untuk membuat 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;">
<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;">
Letakkan teks atau kode script (gambar
atau video) di sini
<br>
</div>
</div>
</div>
</div>
</div>
</div>
- Ganti Tulisan berwarna merah sesuai kehendak Anda
- Klik Publish atau Terbitkan Entri jika sudah selesai.
Cewek Mainin Burung:
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 comments:
Post a Comment