#3 Menampilkan spoiler di wordpress


#3 Menampilkan spoiler di wordpress

Yap, artikel ke 3 dari decrypto saat ini akan membahas mengenai membuat spoiler di WordPress

Cukup mudah,

Saat kamu ingin menulis post di wordpress, kamu tinggal mengganti tampilan edit postnya…

dari Visual ke HTML…

tentunya sudah tahu kan cara menggantinya? pasti sudah!

Nah, lalu copy paste kan kode berikut…

 



<div>
<input type="button" value=" Spoiler " style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>

<div style="background: #CCCCCC; margin: 10px auto;
border: 1px solid #000;
padding: 5px;">
<div style="display: none;">
TEKS YG MAU DIUMPETIN
</div>
</div>

Lihat tulisan yang di-bold. Tulisan “tampilkan” dan code warna CSS bisa diganti sesuai warna themes kita. Bagian yang mau di-hidden di bagian “TEKS YG MAU DIUMPETIN” bisa diisi gambar atau tulisan. Untuk implementasinya sebagai berikut:

 

TEKS YG MAU DIUMPETIN

Nah, mudah bukan?
Silakan bereksperimeeennn!!

./decrypto

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s