Membuat Spoiler widget untuk meringankan blog

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Spoiler widget untuk meringankan blog dan semoga artikel ini bermanfaat.

---

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.

Sebelum berlanjut mungkin sobat mau memasang tabview seperti blog ini silahkan baca Cara membuat Tab View di sidebar blog. atau mau menggunakan cara lainnya baca  Cara Menata widget di blogspot.

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'>
#aks{background: #f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZs8iqu9FFnPxmP8rwToYEPbO3-mdFzHxy3JQM-CYAVrb7-4y02Tkdz3TcFZghC4vNKPhO5vYa6ErQlsjkOZR-ZPhADw_I9TQRrnxUP5ewg0I1Cua8kl0sgGwyDgxNTwKrZFxc2hPeThNd/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/AVvXsEhZs8iqu9FFnPxmP8rwToYEPbO3-mdFzHxy3JQM-CYAVrb7-4y02Tkdz3TcFZghC4vNKPhO5vYa6ErQlsjkOZR-ZPhADw_I9TQRrnxUP5ewg0I1Cua8kl0sgGwyDgxNTwKrZFxc2hPeThNd/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.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Spoiler widget untuk meringankan blog kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 20:01