Cara Membuat Spoiler di Postingan Blog - Sebelum sobat membaca lebih jauh artikel ini, lebih baik bobat ketahui dulu apa itu Spoiler. Spoiler adalah cara untuk menyembunyikan
teks,video,gambar,maupun script dengan tujuan untuk menghemat ruang postingan. Selain itu Spoiler juga dapat mempercepat loading pada suatu website ataupun blog. Nah, postingan saya kali ini akan membahas tentang Cara Membuat Spoiler Pada Postingan Blog. Penasaran bagaimana cara membuatnya? Silahkan baca dengan seksama tutorial yang saya tulis di bawah ini :
Cara Membuat Spoiler Pada Postingan Blog :
1. Login ke blogger
2. Kemudian tulis postingan baru
3. Ganti tab Compose dengan tab HTML
4. Masukan kode di bawah ini
<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 kata-kata disini!<br>
</div>
</div>
</div>
5. Ganti kode yang berwarna
merah dengan konten yang akan sobat sembunyikan.
- 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/AVvXsEg3NhkobLISwzqeY3TjR7CXzfVgPFaVV0pTi-RZDnaEDYW2CwRUnnCvamdj9h17I_f1kc5iJtHjVO_xMnqH-Ec6lHkLbkQ_GLINb-4trf36ysEYAR8LwMFuLoBcrOcGYx428paUrcdPZvI8/s1600/computer.png"></center><br>
</div>
</div>
</div>
6. Kode yang berwarna
biru bisa sobat ganti sesuai selera sobat.
Sekian artikel Cara Membuat Spoiler Pada Postingan Blog dari Mr.Pawaji. Semoga bisa membantu. Pengunjung yang baik selalu meninggalkan jejaknya sebelum ia meninggalkan blog ini. Semoga anda mengerti maksud saya.