Cara Membuat Spoiler atau tombol Show/Hide Pada artikel Blog -Spoiler, hampir sama dengan menempatkan sebuah gambar atau text anda di wadah bingkai yang sering lihat di web atau blog yang
gambar pada artikel nya di sembunyikan dan kalau kita ingin melihat gambar nya kita di suruh klik pada suatu tombol..kira-kira begitu deh ,mungkin sobat lebih paham apa yang di maksud dengan spoiler ,di bawah ini ada beberapa kode pembuatan spoiler yang mungkin dapat menghemat tempat postingan kita baik gambar maupun teks dan juga tidak mengganggu loading web kita,Seperti yang Sobat - sobat lihat gambar disamping itulah contoh SPOILER atau tombol Show / hide . oke sebelum kita mulai silahkan lihat tutorial nya dibawah ini
Ikuti langkah - langkah dibawah ini :
- Login ke blogger masing - masing
- setelah itu buatlah Entri baru terlebih dahulu .
- klik Edit html yang ada disebelah Compose
- letakkan kode - kode dibawah ini sesuai keinginan tulisan anda .
1.spoiler tampilkan/sembunyikan
<div>
<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" 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 = 'Sembunyikan'; } else{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" 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>
NB :
- Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai.
- Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar
2.Spoiler SHOW/HIDE
<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>
NB :
- Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai.
- Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar
Title : Cara Membuat Spoiler atau tombol Show/Hide Pada artikel Blog
Description : Cara Membuat Spoiler atau tombol Show/Hide Pada artikel Blog -Spoiler, hampir sama dengan menempatkan sebuah gambar atau text anda di wadah ...
