Cara Membuat Spoiler di Postingan Blog

Cara Membuat Spoiler di Postingan Blog - Bagi sobat yang sudah pernah main ke forum-forum pasti sudah tidak asing sama yang namanya spoiler. Sering dipakai disana untuk menyembunyikan gambar, tulisan, ataupun video di dalamnya.

Lalu bagaimana kalau ingin menerapkannya di blog, bisa tidak?? Jawabannya adalah bisa. Menarik bukan, dengan adanya spoiler ini maka tampilan blog sobat jadi keren, bisa buka / tutup suatu tulisan, gambar ataupun video. Selain itu juga untuk menghemat space yang digunakan apabila sobat menulis artikel yang lumayan panjang.

Oke, tanpa perlu panjang lebar, saya akan jelaskan urutan cara bikin spoilernya :
1. Login ke akun Blogger sobat
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Di halaman entri sobat pilih mode Edit HTML saat membuat postingan
4. 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;">

Letakkan teks atau kode script (gambar atau video) di sini
<br>
</div>
</div>
</div>

Hasilnya nanti seperti ini :

Judul Spoiler:

atau bisa spoiler model satunya lagi sob :

<div id="spoiler" style="display:none">
konten yang disembunyikan
</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>

Hasilnya nanti seperti ini :

5. Ganti kode yang berwarna Merah Tebal sesuai dengan keinginan sobat.
6. Selamat mencoba, semoga bermanfaat.

Diposting Oleh : Boeztanoel ~ Blogging, Trik, Tips, Free Software

Sobat sedang membaca artikel tentang Cara Membuat Spoiler di Postingan Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya.

<a href="https://oplosanblog.blogspot.com/2014/03/cara-membuat-spoiler-di-postingan-blog.html" target="_blank">Cara Membuat Spoiler di Postingan Blog</a>

:: Oplosanblog ! ::

Get this widget [ Here ]