Cara Membuat Spoiler Di Potingan Blog | Tutorial Blog

Sudah lama saya gak post Kira-kira 2 minggu, karena banyak sekali urusan yang harus saya lakukan. Dulu saya udah post tentang "Cara Mudah Membuat Scrool di Postingan blog". Untuk kali ini saya akan Posting Tutorial blog saja tentang "Cara Membuat Spoiler Di Blog | Tutorial Blog". Sebelumnya Sobat Blogger atau pengunjung blog ini sudah tahu belum dengan Spoiler ini. Baiklah saya jelasin singkat saja.

Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. Tapi sebagain orang pasti udah tau dengan spoiler . Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Spoiler ini hampir sama dengan Scrol. nanti bisa di lihat di post yang lalu.

Untuk lebih jelasnya nanti bisa di lihat contoh yang sudah jadi. sekarang mari kita ikuti langkah-langkah untuk membuat Spoilernya.

1. Pertama Sobat log-in dulu ke blog
2. Terus Sobat buat Entri baru / Buat Postingan baru 
3. Kemudian sobat Pilih HTML . (Untuk lebih jelasnya bisa dilihat pada gambar di bawah)

 

   4.  Setelah Itu Sobat Copas (Copy Paste) Kode di bawah ini . 

<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>

 Note :

Kode yang saya kasih warna merah yang harus sobat ganti, Mulai dari Judul Spoiler, Tombol Buka dan Tutup.

 

    5.  Setelah itu sobat bisa Post. 

    6.  Seleasai :)

Keterangan :

Sobat bisa menggunakan Spoiler ini di Widget blog anda

Lihat Contoh di bawah :

Contoh Spoiler:

Seperti inilah Contoh Dari Spoiler. sobat juga bisa meletakkan Script Widget sobat di sini... . . . . . . . Terima kasih telah mengunjungi blog ini. ARMIFA-BLOG

Semoga Posting Tutorial blog tentang "Cara Membuat Spoiler Di Potingan Blog | Tutorial Blog" bisa Bermanfaat dan selamat Mencoba