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>
<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/AVvXsEgoQwDs42GRaLv1Yecb5l3WDXHjY4PwAjDrjFcL4XGub1MaINOS2EQYuTyEk-TCQqufEBs9KN4DJf4SQVf1jAKajhqbZX0pCQZhmXOlK4RvEo-SZN_LzkOEn5f-8KBKDEuOCyHdU_9S3ilW/s1600/computer.png"></center><br>
</div>
</div>
</div>
Sumber : http://www.depermana.com



