Cara membuat Spoiler di postingan blog

Spoiler akan membuat posting Anda menarik dan memperpendek panjang pos. spoiler biasanya digunakan untuk menyembunyikan kode html, foto ataupun kalimat. cara untuk membuatnya juga mudah.

Anda hanya menambahkan kode pada "edit HTML"  posting untuk menyembunyikan kode/foto/kalimat. lihat langkah-langkah di bawah ini:

* buat posting baru

* pilih "edit HTML" yang ada di sudut kiri atas.

* masukkan kode di bawah ini:

<div style="margin: 5px;">

<div style="margin-bottom: 2px;">

<span style="font-weight: bold;">Kode</span>

<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 = 'Hide'; } else {

this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';

this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>

<div style="border: 1px inset; margin: 0px; padding: 2px;">

<div style="display: none;">

Kode/kalimat/gambar anda di tempatkan disini</div>

</div>

</div>

* Kode yang berwarna merah adalah kode atau gambar atau kalimat yang akan Anda sembunyikan. Silahkan modifikasi sesuai yang Anda butuhkan.

* itu saja. selamat mencoba :)

Ini demonya :

Kode

kode/kalimat/gambar

Share ke :

About Syakir Rahman

Syakir rahman adalah seorang blogger, dan juga front-end web developer. Kunjung website pribadinya disini : http://www.syakirurohman.net