Membuat Spoiler widget untuk meringankan blog, mungkin ini salah satu
cara mengatasi beratnya loading blog yang dikarenakan banyaknya
pemasangan widget. selain dapat sedikit meringankan loading dengan
memasang spoiler pada widget ini akan meminimalkan ruang yang terpakai
sehingga memudahkan pengunjung untuk mengetahui isi blog kita karena
tidak usah jauh-jauh mengscroll halaman blog kita. seperti pada blog
ini saya memasang kurang lebih 17 widget dengan menggunakan Tabview
widget dan Spoiler ini maka tampilannya tidak begitu rame dan jauh
sampai kebawah, coba sobat bayangkan kalau ke 17 widget diblog ini saya
pasang secara default tanpa perubahan apapun sudah dipastikan
bagaimana tingginya blog ini dan harus memutar scroll berapa kali
ditambah bagaimana ramenya blog ini.
Ok. kita lanjut saja pada pokok bahasan, sebelum berlanjut sobat bisa lihat contoh dari tutorial ini pada sidebar:
Silahkan coba klik Lihat yang ada disisi kanan weidget itu, nah itulah
yang saya maksudkan spoiler pada widget, dengan menggunakan spoiler
maka kita dapat meminimalisir tampilan blog dan ini otomatis akan
meringankan blog juga. ini saya rasakan bedanya dengan sebelum pakai
spoiler meskipun jaringan juga yang menjadi peran utama dalam loading
blog namun ini dapat sedikit membantu.
Langkah membuat spoiler pada widget:
- Seperti biasa login ke blogger
- Pilih tata letak kemudian tambah gadget
- Selanjutnya pilih javascript/HTML kemudian beri judul utama widget tersebut. Contoh (aksesories) pada blog ini.
- kemudian copy paste kode dibawah ini pada kotak dibawahnya.
<style type='text/css'>kalau sobat mau memasang lebih dari satu maka sobat tinggal menambahkannya lagi dibawah kode diatas secara berurutan. hasilnya seperti ini:
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxVe-q0_IWAaaC2c9m4HDaQ7zu8zrPeA4C_5Iw3xJt4holF8NCRL-Ww_KzYvaXyJRkSW4rndqdaFfP2hG2PAslsl_nNFpt_ZQOAkXNv9_M0DiOPcU4IWC5aReZBCXi2nf2oxeyh-hfLo1/h120/gradient2.php.png) repeat-x; border: 1px solid #ddd; padding: 3px;}
#jud{font-family: arial; font-size: 12px;color:#555; margin-bottom: 0px;font-weight:bold;text-align:left;}
</style>
<div id="aks"> <div id="jud">Judul Widget sobat<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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget sobat</div> </div> </div>
<style type='text/css'>
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxVe-q0_IWAaaC2c9m4HDaQ7zu8zrPeA4C_5Iw3xJt4holF8NCRL-Ww_KzYvaXyJRkSW4rndqdaFfP2hG2PAslsl_nNFpt_ZQOAkXNv9_M0DiOPcU4IWC5aReZBCXi2nf2oxeyh-hfLo1/h120/gradient2.php.png) repeat-x; border: 1px solid #ddd; padding: 3px;}
#jud{font-family: arial; font-size: 12px;color:#555; margin-bottom: 0px;font-weight:bold;text-align:left;}
</style>
<div id="aks"> <div id="jud">Judul 1<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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 1</div> </div> </div>
<div id="aks"> <div id="jud">Judul 2<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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 2</div> </div> </div>
<div id="aks"> <div id="jud">Judul 3<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 = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Kode Widget 3</div> </div> </div>
- Judul Widget sobat silahkan beri judul widget
- Masukan Kode Widget sobat Silahkan masukan kode widget sobat
Apabila sobat mau menambahkan lebih banyak lagi sobat tinggal menambahkannya seperti diatas.
Tips:
Untuk
widget dengan ukuran kecil seperti statistik blog dan banner sobat
bisa menyimpan kodenya secara berurutan dalam satu spoiler.
0 komentar:
Posting Komentar