ADMIN Effendi-Dmth.blogspot MENGUCAPKAN SELAMATMENYAMBUT HARI RAYA IDUL FITRI 1433 HIJRIAH MOHON MAAF LAHIR DAN BATIN

Saturday, August 04, 2012

MEMBUAT SPOILER WIDGET UNTUK MERINGANKAN BLOG

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:
Membuat Spoiler widget untuk meringankan blog
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'>
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizM9mRBSkcOEZGB1BGTH69mLnz3bbhU8XZyDwJVdvwaBe_Ph9CfFXg44ujNE-omfXBMNB7wgSuTvJKW1-ojHSdkjLvm-OV2Plyf9N8SXUCk0ZtXS-Icb-1IaFPLip09_kN1ruNxk7uLSM3/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>
kalau sobat mau memasang lebih dari satu maka sobat tinggal menambahkannya lagi dibawah kode diatas secara berurutan. hasilnya seperti ini:
<style type='text/css'>
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizM9mRBSkcOEZGB1BGTH69mLnz3bbhU8XZyDwJVdvwaBe_Ph9CfFXg44ujNE-omfXBMNB7wgSuTvJKW1-ojHSdkjLvm-OV2Plyf9N8SXUCk0ZtXS-Icb-1IaFPLip09_kN1ruNxk7uLSM3/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.


Artikel terkait:

Ditulis Oleh : Unknown ~ Hidup Akan Terasa Indah Bila Saling Berbagi

Artikel MEMBUAT SPOILER WIDGET UNTUK MERINGANKAN BLOG ini diposting oleh Unknown pada hari Saturday, August 04, 2012. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

:: Get this widget ! ::

SUBMIT YOUR SITE 4 FREE

3comments:

makasih gan...
blog ane jadi ga berat...
nice info gan

sama-sama gan..., semoga bermanfaat ya..lain waktu berkunjung mene yo

 
Related Posts Plugin for Effendi DmTh,