Cara Membuat Spoiler di Blog

Panduan blogger yang akan membahas,menjelaskan serta membantu sobat blogger semua khususnya yang masih pemula dalam dunia blog tentang "Cara Mudah Membuat Spoiler Di Blog". Tahukah sobat blogger apa itu spoiler? Jawabannya spoiler merupakan sebuah tombol "hide show" kotak kode html pada sebuah artikel/postingan di blog. Sebelumnya perlu sobat ketahui, fungsi spoiler adalah untuk menghemat tempat pada postingan blog sehingga tidak memakan tempat dan terlihat lebih simpel.

Mungkin "spoiler" banyak dicari oleh kalangan blogger mengingat fungsinya yang simpel dan atraktif.Dalam perkembangannya,spoiler ini biasanya di gunakan untuk "membungkus" kode-kode html yang sangat panjang dan banyak. Jika tak mengakalinya dengan spoiler,maka kode-kode html tersebut akan banyak memakan tempat pada sebuah halaman posting/artikel. Sehingga akan membuat tampilan halaman artkel/postingan tersebut kelihatan "melorot"

Dan untuk membuatnya,silahkan sobat copy kodenya yang dilengkapi contoh di bawah ini :

Contohnya :

Judul Spoiler

ISI SPOILER

Kodenya :

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

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>

 Atau  :

<div><div style="margin: 5px;">
 <div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA</div></div></div></div></div>

 Memakai Bentuk Yang lain :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39; Close..&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39; Clik Here&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div>