Meringankan Blog dengan SPOILER
Selamat sore sobat,sudah lama saya tak posting artikel hehe langsung saja lah,kali ini saya akan share tentang cara membuat spoiler
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.
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/AVvXsEiiPAMzhV15eU9xv5-i9ov5_GtlbP7qGaEqAlyBYYlhmf_0rbi_qdwi7ffpkWrvAESLvB67XWfXaAivH3iYUAsFr08EBsZz_tUZKgpO8G9_xpGs4ebbv1wDc5NgJveuhIzIsMMPg6CjHHrS/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/AVvXsEiiPAMzhV15eU9xv5-i9ov5_GtlbP7qGaEqAlyBYYlhmf_0rbi_qdwi7ffpkWrvAESLvB67XWfXaAivH3iYUAsFr08EBsZz_tUZKgpO8G9_xpGs4ebbv1wDc5NgJveuhIzIsMMPg6CjHHrS/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.Ssekian :D
Category: Tips dan Trik, Tutorial Blog
0 التعليقات