 |
| Membuat tombol show atau Hide |
Kamu penasaran, atau memang sedang mencari artikel yang membahas tentang hal ini... Berikut ini akan aku coba berbagi tips mengenai cara-caranya beserta keterangan gambar. Bagi teman-teman yang ingin memasang tombol show hidden di blog / postingan, caranya gampang. Kamu hanya perlu mengcopy paste kode HTML di bawah ini ke dalam postingan Kamu .
Pertama masuk di akun Blogger
- lalu klik post
- dan klik html (bukan compose)
- lalu copy paste html berikut ini:
Copy Link berikut :
<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukkan tulisanmu di sini
</div></div></div>
Maka Akan seperti ini:
Klik show untuk melihat
Nah kalau yang satu ini bisa sobat masukan gambar sesuai keinginan sobat
Copy Link berikut :
</div>
<div style="text-align: center;">
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 1px;">
<input 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 = 'HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'SINAU KOMPUTER'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: 250px;" type="button" value="HATI-HATI !!!" /></div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<img border="0" height="320" src="Masukan Link photo yang anda inginkan" width="300" /></div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 1px;">
<input 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 = 'HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'SINAU KOMPUTER'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: 250px;" type="button" value="HATI-HATI !!!" /></div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<img border="0" height="320" src="Masukan Link photo yang anda inginkan" width="300" /></div>
</div>
</div>
</div>
</div>
Maka akan seperti ini:
Keterangan ;
Code; <div style="margin-top: 5px; text-align: left;"> ; merupakan code untuk penempatan tombol Buka Tutupnya.. Mau sobat taruh di sisi kiri dengan code left. Untuk ditengah dengan code center. Untuk di sisi kanan dengan code right. ingat, hanya ubah yang berwarna merah aja ya soob.
Code; Tulisan Tutup Buka Buka yang berwarna merah, silakan sobat ganti debgan sesuka sobat.
Code; width: 60px ; Yang berwarna merah tersebut Merupakan nilai ukuran lebar dari tombol Buka Tutup tersebut.. Silakan juga sobat rubah sesuai keinginan sobat.Tapi hanya sobat rubah nilainya saja yaa.
Code; ... Isi Teks ... ; Ganti dengan Isi artikel sobat sendiri, atau terserah Kamu lah
Semoga Bermanfaat
Sumber