Andai saja jika anda punya banyak widget atau pun banner-banner teman blogger lain, pastinya bila pengunjung membuka homepage anda akan sangat terasa berat sekali karena banyaknya widget-widget dan banner tersebut. Oleh sebab itu, anda bisa menggunakan Spoiler yang berfungsi untuk meminimalisasi widget atau banner tersebut dalam sebuah button Show. Jika tombol show anda tekan nanti akan terbuka widget atau banner apa saja yang anda letakkan didalamnya dan cara ini bisa menghemat loading Homepage anda.
- Login ke Blogger.
- Pilih tab Design - Page Element.
- Pilih Add Widget – HTML/JavaScript.
- Lalu masukkan kode berikut ini :
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Nama Spolier</span></i><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 = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Nama Spolier</span></i><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 = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Code HTML-nya
</div>
</div>
</div>
</div>
Tidak ada komentar:
Posting Komentar