Cara Membuat Spoiler Di Postingan Blog

Spoiler adalah salah satu trik menarik mengehamat tempat pada blog, saya yakin sobat pernah liat spoiler di forum-forum seperti kaskus dll (iyalah udah pernah liat spoiler kalo nggak ngapain baca postingan ini, hehehe) fungsi utama spoiler adalah untuk menghemat tempat dikarenakan postingan memilik gambar yang yang lumayan banyak ataupun blog-blog yang menyediakan tutorial blog yang memilik postingan berisi script yang panjang dengan memakai spoiler akan menghemat tempat sekaligus loading lebih cepat, sebenernya fungsinya hampir sama dengan textarea namun spoiler memilik fitur buka tutup.

Contoh Spoiler:

komputer:

• untuk membuat spoiler copy paste script dibawah ini dalam posting dalam mode HTML

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">judul spoiler:
<input value="BUKA"style="margin: 0px; padding: 0px; width: 60px;
font-size: 12px;" 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 = 'tutup'; }" type="button">
</div>
<div class="alt2" style="border: 2px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">sisipkan gambar atau text yang akan di buat spoiler disini<br>
</div>
</div>
</div>

NOTE: 

• untuk menyisipkan text/script bisa langsung ditulis tanpa menggunakan atribut
• untuk menyisipkan gambar gunakan atribut <center><img src="url gambar"></center>

Contoh:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">judul spoiler:
<input value="BUKA"style="margin: 0px; padding: 0px; width: 60px;
font-size: 12px;" 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 = 'tutup'; }" type="button">
</div>
<div class="alt2" style="border: 2px inset ; margin: 0px; padding: 6px;">
<div style="display: none;"><center>
<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHS8RuNg5bFLq0-8v4J6IrW2KxYXCechRREUQMW6aOqI7Wz26sHBDVgM4-QNA0EGcc9ncVHxNOqUMsVayTr0FebATxirwmNwWvybWrt2zIbQkmSsFjKZKZQTJfQ4VwKEiWbOhX0yywR8Da/s1600/computer.png"></center><br>
</div>
</div>
</div>

©2013 copyright