Kali ini membahas tentang cara membuat tombol hide-show atau juga lebih dikenal dengan istilah spoiler. manfaat dari tombol hide-show atau spoiler ini adalah untuk menyingkat suatu tampilan fitur atau
objek lain. Misalnya saja teman-teman punya artikel yang panjaaang sekali, dan takut kalau para pembaca nantinya merasa jenuh, nah teman-teman bisa menggunakan tombol spoiler ini, untuk menyingkat beberapa dari bagian artikelnya teman-teman. Selain itu tombol spoiler ini tidak hanya berguna untuk tulisan atau teks, akan tetapi juga berguna untuk gambar, serta objek-objek yang dapat ditampilkan di blognya teman-teman yang menggunakan jasa javaScript/ kode HTML. Nah kalau penasaran apa itu spoiler, bisa tuh langsung melihat contoh tampilan berikut ini:
Bagaimana,
imutkan
baguskan?
Untuk membuat tombol spoiler, kita hanya membutuhkan script berikut ini:
<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan"
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 style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat
</div></div></div></div>
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan"
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 style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat
</div></div></div></div>
Bagi teman-teman yang belum tahu cara memasangnya, bisa dilakukan melalui langkah-langkah berikut ini:
1. Login ke blogger.com.
2. Klik Tata Letak.
3. Klik Tambah Gadget/ Add Gadget.
4. Pilih HTML/JavaScript.
5. Masukkan kode berikut ini, dan jangan lupa klik simpan:
<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan"
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 style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat
</div></div></div></div>
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan"
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 style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">
Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat
</div></div></div></div>
Ket:
-.Biru: Silahkan anda ganti dengan kata-kata yang anda inginkan misal: Munculkan, atau show!
-.Orange: Anda bisa menggantinya dengan kata yang anda inginkan, misal: Hide, atau hilangkan!
-.Hijau: Silahkan disisipi dengan teks atau kode yang memang perlu disingkat.
0 komentar:
Posting Komentar