Cara Membuat Fitur Spoiler di Blogger

Tutorial Blog,

{[['']]}

Apakah agan tahu apa itu "Spoiler"? Sebenarnya saya sendiri tidak tahu secara lisan apa arti dari spoiler itu sehingga saya tidak bisa menjelaskannya sekarang karena takut salah dalam menyampaikannya, hehe..

Tapi gak usah khawatir, masih banyak jalan ke Roma. Tidak bisa menjelaskannya apa itu spoiler, maka saya langsung kasih contohnya saja ya, berikut ini adalah contoh spoiler (klik tombol open):

Contoh Spoiler:

Ini dia sob yang dinamakan spoiler. he.. :D

Gimana, sekarang sudah tahu kan seperti apa itu spoiler?  fungsi utama spoiler itu sendiri adalah untuk 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. Oke, langsung saja ya. Buat agan yang tertarik cara membuatnya, silahkan ikuti langkah-langkahnya:

Membuat spoiler dalam artikel/posting Blogger sangat mudah dan simpel,

>> Saat agan sedang membuar artikel baru untuk diposting, dan agan mau menyertakan sebuah spoiler dalam artikel tersebut, agan tinggal klik tombol "HTML"

Gambar:

>> Kemudian letakkan kode berikut ini kedalam artikel yang sedang agan buat:

Kode Untuk 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 anda disini. dapat diisi berupa gambar, kode html, paragraf dan lain-lain....

</div>
</div>
</div>

>> "Judul Spoiler" bisa anda ubah sesuai keinginan.
>> Ganti tulisan "Masukkan isi spoiler anda disini. dapat diisi berupa gambar, kode html, paragraf dan lain-lain...." dengan isi spoiler yang ingin anda masukkan.
>> Klik tombol "Compose" supaya kembali ke mode seperti biasa untuk melanjutkan menulis artikel anda.

Gimana mudah kan? selamat mencoba, semoga bermanfaat...