Cara Membuat Spoiler di Posting Blog

Unknown Reply 10:03 PM
Cara Membuat Spoiler di Posting Blog

Karena ane sering ngaskus, kayanya penting juga kita bisa buat spoiler di post blog. Ok kali ini ane ingin share tentang cara membuat spoiler di blog Terkadang memang pada saat kita posting yang pada postingan tersebut mempunyai isi postingan cukup panjang, yah repot juga kalo dipuka kaya struk belanjaan, belum lagi postingannya yang kita post rapih atau tidak, nah untuk mengatasi maslah itu alangkah baiknya kalau kita membagi postingan tersebut kedalam beberapa bagian sehingga akan terlihat lebih bagus, umpamanya kita buat seperti daftar isi atau kita buat topik utamanya unyuk ditampilkan dan isi keseluruhan disembunyikan. Itu semua dapat dilakukan dengan membuat spoiler dimana dengan spoiler tersebut kita bisa membuka dan menyembunyikan postingan, yah bermanfaat juga untuk konten-konten yang memang harus dihide he".

Langsung saja ya, berikut kodenya tinggal dicopy aja ke html posting :

Spoiler 1 :

<div style="background: #f9f9f9; border: 1px solid #ccc; padding: 3px;"> <div style="font-family: arial; font-size: 12px; margin-bottom: 0px;"> <b>Judul Spoiler Ala Wikipedia:</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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: blue; font-family: arial; font-size: 12px; height: 16; margin: 0px;" type="button" value="Buka" /> </div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; padding: 0px;"> <div style="display: none;"> <br /> ISI SPOILER</div> </div> </div>

Spoiler 2 :
<div style="padding: 10px; border:1px solid #ccc;background:#e9eef2"> <div style="margin-bottom: 2px;"><b>Judul Spoiler Soft:</b> <input value="Buka" style="border:0px solid #000;margin:0px; width: 60px;color:#fff; font-size: 10px; height:20px; background:#323c47" 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 style="margin: 10px; padding: 0px; border: 0px inset #fff;"> <div style='display:none'>ISI SPOILER</div> </div> </div>
Spoiler 3 :
<div style="padding: 10px;"> <div style="margin-bottom: 2px;"><b>Judul Spoiler Biasa :</b> <input value="Buka" style="border:2px inset ;margin:0px; width: 60px;color:#000; font-size: 10px; height:20px;" 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 style="margin: 10px 0 0px 0; padding: 5px; border: 2px inset #fff;"> <div style='display:none'>ISI SPOILER</div> </div> </div>

Bila ingin memasukan code didalam spoiler tersebut, harus meng-uncode terlebih dahulu kode HTML silahkan kunjungi situs http://www.centricle.com/tools/html-entities/ kemudian copy kode yang akan disimpan di dalam spoiler dan pastekan disitu tersebut selanjutnya kode yang telah di unhide anda copy dan pastekan didalam spoiler. Tidak terlalu sulit bukan? selamat mencoba ya, cocok ko dengan artikel yang bisa berhalam-halaman he".


Cara Membuat Spoiler di Posting Blog

Related Posts

Belajar Blog 2806566467643410010

Post a Comment

Search

Popular Posts

Labels