Tips Meringankan Loading Blog Dengan Menggabungkan Widget Gambar
Widget adalah suatu kumpulan html yang dipasang pada blog. Widget dalam blog disebut juga gadget.
 |
Widget dapat di pasang pada sidebar, footer maupun header tergantung dari tema yang kita pakai, dan tentunya lokasinya dapat disesuaikan dengan keinginan kita.
Dulunya widget ini digunakan hanya untuk memasang iklan pada blog, namun dengan perkembangan dunia blog, widget dipergunakan untuk menambahkan informasi pada blog serta mempercantik blog.
Widget di masa ini berisi eksistensi dari pemilik blog itu sendiri, seperti terdapat about me, akun media sosial atau banner komunitas yang diikuti.
Widget yang paling banyak menggunakan widget adalah saat pemasangan gambar banner komunitas.
Banyak dari blogger yang saya temui memasang banner komunitas yang diikuti, dan yang terpasang dalam blognya tidak hanya terdapat satu banner, bisa lebih dari 3 banner bahkan terkadang pemilik blog memasang widget untuk banner secara tidak teratur dan membabi buta.
Banyak dari blogger yang saya temui memasang banner komunitas yang diikuti, dan yang terpasang dalam blognya tidak hanya terdapat satu banner, bisa lebih dari 3 banner bahkan terkadang pemilik blog memasang widget untuk banner secara tidak teratur dan membabi buta.
Padahal pemasangan widget yang tidak rapi akan mengakibatkan loading page blog kita menjadi berat.
Akibat yang tidak kita sadari dengan loading page yang berat adalah traffic blog yang stagnan. Apa hubungannya lambatnya loading page dengan traffic ?
Loading page yang lambat akan mengakibatkan pembaca yang tadinya mau ke blog anda akan beralih ke blog lain yang loading page nya lebih cepat.
Jadi pemasangan widget yang tepat merupakan langkah awal untuk mendapatkan loading page yang cepat dan penggabungan widget merupakan salah satu solusi masalah ini.
sebelum melakukan penggabungan widget gambar sebaiknya kalian sudah membuat url untuk gambar yang akan kalian gabungkan, sehingga dengan mudah dapat dimasukan ke dalam kode HTML.
Berikut beberapa cara menggabungkan widget gambar menggunakan HTML :
- Memasang Gambar Secara Vertikal
pemasangan widget gambar secara vertikal biasanya diletakkan di sidebar blog. saya pernah menggunakan cara ini namun karena menurut saya sidebar jadi terlalu panjang saya tidak menggunakannya lagi. Berikut cara pemasangannya
1. Masuk ke Bagian Layout / Tata Letak
2. Lihat di bagian side bar kemudia klik Add gadget
3. Pilih HTML/JavaScript
4. Lalu copy paste kode HTML berikut
<center><a href="http://emak2blogger.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpFXtZH6SuI8Yt72zXZ7Z0UYjBis2t5zWKnp7Oj0iYfaTvFi7uC0olH5OKMw1QWTjbS-H-ShaUEHylpHL0HmmGY__C2ygGO3E-hO-0lDFqbGO-jyWXSUO4yF-j-R6w30yloW0OKDG9ig/h120/bannermemberfloral.jpg" border="0" alt="" width="200" height="200" /></a></center>
<center><a href="http://www.bloggerperempuan.co.id" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIXy5afwn_ZAoR3s2Y42sSjAxykwH2UwMBr3Yzlq_6a977S5y-tY3kQ-6AX4_odEeEuRmHTYDaXh8VbHfB61ZUFpmVO6Vjms3yqzaACg-tZrJLP8liThy4dzM1Am2dUlJG8umhcMtaK0/h120/Logo-Blogger-Perempuan-Network-round.png" border="0" alt="Blogger Perempuan" width="200" height="200" /></a></center>
<center><a href="http://www.1minggu1cerita.id/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiwyMKOMaJik6AcA2JkwvFkqwWToYlluKqyxEgSNfgGy66WFvpDBwlltoFQu5v333m4kg5jFmkvYX_WMbWKvDwI4G2_-6KtHJ9eNNtad0PbbzwXCi_V4S1Wh3aU3sy_Co48rZ_oax4hI/h120/download+%25281%2529.jpg" border="0" alt="" width="200" height="200" /></a></center>
Keterangan :
warna biru : dapat diganti dengan url komunitas yang kalian ikuti
warna merah : dapat diganti dengan url gambar kalian.
Waran Ungu : dapat diganti dengan ukuran sesuai dengan yang kalian inginkan
5. Hasilnya
5. Hasilnya
- Memasang banner Secara Horisontal
Apabila penggabungan widget dilakukan pada side bar maka langkah yang digunakan sama dengan saat memasang banner secara vertikal. Klik bagian Tata Letak, kemudian Add Gedget, pilih HTML. Kode HTML yang digunakan adalah sebagai berikut :
<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 200px;">
<tr><td><a href="http://emak2blogger.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpFXtZH6SuI8Yt72zXZ7Z0UYjBis2t5zWKnp7Oj0iYfaTvFi7uC0olH5OKMw1QWTjbS-H-ShaUEHylpHL0HmmGY__C2ygGO3E-hO-0lDFqbGO-jyWXSUO4yF-j-R6w30yloW0OKDG9ig/h120/bannermemberfloral.jpg" border="0" alt="" width="50" height="50" /></a></td>
<td><a href="http://www.bloggerperempuan.co.id" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIXy5afwn_ZAoR3s2Y42sSjAxykwH2UwMBr3Yzlq_6a977S5y-tY3kQ-6AX4_odEeEuRmHTYDaXh8VbHfB61ZUFpmVO6Vjms3yqzaACg-tZrJLP8liThy4dzM1Am2dUlJG8umhcMtaK0/h120/Logo-Blogger-Perempuan-Network-round.png" border="0" alt="Blogger Perempuan" width="50" height="50" /></a><td>
<td><center><a href="http://www.1minggu1cerita.id/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiwyMKOMaJik6AcA2JkwvFkqwWToYlluKqyxEgSNfgGy66WFvpDBwlltoFQu5v333m4kg5jFmkvYX_WMbWKvDwI4G2_-6KtHJ9eNNtad0PbbzwXCi_V4S1Wh3aU3sy_Co48rZ_oax4hI/h120/download+%25281%2529.jpg" border="0" alt="" width="50" height="50" /></a><td>
</td></center></td></td></center></td></td></td></tr></table>
Keterangan :
warna biru : dapat diganti dengan url komunitas yang kalian ikuti
warna merah : dapat diganti dengan url gambar kalian.
Waran Ungu : dapat diganti dengan ukuran sesuai dengan yang kalian inginkan
- Memasang banner pada footer
1. Masuk pada bagian Tata Letak
2. Arahkan kursor pada footer kemudian Add Gedget
3. masukan kode HTML berikut
<table border="0" bordercolor="#111111" cellpadding="2" cellspacing="0" style="border-collapse: collapse; width: 400px;"><tr><td><a href="http://emak2blogger.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdpFXtZH6SuI8Yt72zXZ7Z0UYjBis2t5zWKnp7Oj0iYfaTvFi7uC0olH5OKMw1QWTjbS-H-ShaUEHylpHL0HmmGY__C2ygGO3E-hO-0lDFqbGO-jyWXSUO4yF-j-R6w30yloW0OKDG9ig/h120/bannermemberfloral.jpg" border="0" alt="" width="200" height="200" /></a></td><td><a href="http://www.bloggerperempuan.co.id" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdIXy5afwn_ZAoR3s2Y42sSjAxykwH2UwMBr3Yzlq_6a977S5y-tY3kQ-6AX4_odEeEuRmHTYDaXh8VbHfB61ZUFpmVO6Vjms3yqzaACg-tZrJLP8liThy4dzM1Am2dUlJG8umhcMtaK0/h120/Logo-Blogger-Perempuan-Network-round.png" border="0" alt="Blogger Perempuan" width="200" height="200" /></a><td><td><center><a href="http://www.1minggu1cerita.id//" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiwyMKOMaJik6AcA2JkwvFkqwWToYlluKqyxEgSNfgGy66WFvpDBwlltoFQu5v333m4kg5jFmkvYX_WMbWKvDwI4G2_-6KtHJ9eNNtad0PbbzwXCi_V4S1Wh3aU3sy_Co48rZ_oax4hI/h120/download+%25281%2529.jpg" border="0" alt="" width="200" height="200" /></a><td></td></center></td></td></center></td></td></td></tr></table>
Keterangan :
warna biru : dapat diganti dengan url komunitas yang kalian ikuti
warna merah : dapat diganti dengan url gambar kalian.
Hasilnya
Dari ketiga cara menggabungkan gambar widget diatas aku menggunakan pad sidebar.
Dan tentu saja setelah aku cek menggunakan pagespeed insight nilai ku 99.
Hal ini berarti menggabungkan widget gambar merupakan hal yang tepat dilakukan agar blog tidak berat. Bagaimana dengan kalian , sudahkah melakukan cara ini ?
Referensi : https://yukngeblogmudah.blogspot.com
Seftinaqurnia
i'm a Mother | Blogger | Traveller | Newbie Photographer
Nanti mau coba dulu mba, baru tau sih hehe.. makasih ya infonya..
Sama sama mba semoga bisa sedikit membantu
wah infonya bermanfaat sekali mba, ternyata bisa pakai html ya buat naruh banner ini, selama ini saya naruhnya misah2 pakai foto per komunitas. mau nyoba cara ini ah.
Iya mba terimakasih, semoga dapat sedikit membantu
Saya ngak menyangka kalau ternyata masih ada blog wanita yang rela membuat kontent tutorial. Tulisannya bermanfaat Mbak, lanjutkan. :)
Hehehehe soalnya kebetulan mengalami kang jadi sekalian aja dibikin konten biar nggak keluapaan nantinya
Waaaaah... ngerti teknis ngeblog juga ya mba, mantap euy :)
Baru ngerti dikit mba, nulis yang dilakuin aja takut lupa nanti kalo nggak ditulis
Wah bermanfaat sekali mbak tulisannya, saya baru tau ada cara seperti ini. Biasanya pakai coding yang biasa buat insert gambar di widget, hihi :D Terima kasih infonya
Sama sama mba semoga bisa sedikit membantu
Wah.. saya gak begitu paham ini. Hahhaa.. saya pasang Widget karena Copas yang sudah saya buat di Page blogspot. Tinggal copas kode htmlnya. Ternyata bisa seperti ini juga ya.. ? Terima kasih ilmunya mbak
Hihihi iya mba awalnya aku juga copas copas aja terus penasaran jadi ngerti deh lama lama
wah terima kasih ilmunya ka :D
Sama sama semoga bermanfaat :)
Wah. Baru tahu. Oke sip mbak, bisa ditiru. Makasih yaaaa tutorialnya.
Semoga membantu mba :)
Ada triknya. Bikin draft postingan biasa. Simpan. Ubah compose. Postingan berubah bentuk jadi code HTML. Lalu select all. Copy. Dan paste ke widget yang tipe HTML/Javascript. Save. Selesai. Nanti kalau ngedit ya ke draft blog lagi. Ini berlaku di blogspot. Ga tau bisa ga di wordpress. Silahkan mencoba
Waa mba Heni makasih infonya aku akan coba deh :)
Saya juga pakai gini tapi yg vertical, noted buat yg horizontal, makasih sharingnya.
Sama sama mba :)
Yup! Saya juga menerapkan ini di blog saya. Cuma kalau saya, udah ubah ukurannya jadi lebih kecil. Jadi loadnya juga lebih ringan.
Nice share!
Bener mba memang harus dikecilkan dulu baru dibuat kayak gini biar tambah ringan
Oooh... ide bagus banget ini. Aku baru bikin blog November kemaren, baru launching 15 Januari. Baru ikut 1 komunitass dan langsung segede gaban itu picturenya. Nggak kebayang kalau aku ikut banyak kayak Mbak. Makasih banyak tipsnyaaa
Semoga bisa membantu mba :)
Wah makasig infonya mbak. Saya udah coba pake yang model horisontal.. tapi hasilnya gak teratur mbak (jarak2 gitu) ? Bagaimana supaya bisa teratur ya Mbak?
Coba utak Atik width dan height nya mba biar nemuin yang pas
This comment has been removed by a blog administrator.
Makasih banyak mbak, bermanfaat banget. Setelah saya coba speed blog saya menjadi 62 . Bagaimana cara meningkatkan skala speednya menjadi cepat mbak?