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://lh3.googleusercontent.com/-9hM5ri85NHk/XEU-fvZG94I/AAAAAAAAB1U/8jmkk5Tl2b4A2tq56j0p_-3ADr9l2dumwCEwYBhgL/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://lh3.googleusercontent.com/-CnyXqmwPC5Q/XEU-h3OnkoI/AAAAAAAAB1k/-5ObVBfQHeUF8bd8vfeH28d9Cen7WHM_wCEwYBhgL/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://lh3.googleusercontent.com/-aXTWWuBXS-Q/XEVDXSCh_kI/AAAAAAAAB2E/asGj_91u9a0XxfRlFrCQLsfJyw9VTfMlACLcBGAs/h120/download%2B%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://lh3.googleusercontent.com/-9hM5ri85NHk/XEU-fvZG94I/AAAAAAAAB1U/8jmkk5Tl2b4A2tq56j0p_-3ADr9l2dumwCEwYBhgL/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://lh3.googleusercontent.com/-CnyXqmwPC5Q/XEU-h3OnkoI/AAAAAAAAB1k/-5ObVBfQHeUF8bd8vfeH28d9Cen7WHM_wCEwYBhgL/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://lh3.googleusercontent.com/-aXTWWuBXS-Q/XEVDXSCh_kI/AAAAAAAAB2E/asGj_91u9a0XxfRlFrCQLsfJyw9VTfMlACLcBGAs/h120/download%2B%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://lh3.googleusercontent.com/-9hM5ri85NHk/XEU-fvZG94I/AAAAAAAAB1U/8jmkk5Tl2b4A2tq56j0p_-3ADr9l2dumwCEwYBhgL/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://lh3.googleusercontent.com/-CnyXqmwPC5Q/XEU-h3OnkoI/AAAAAAAAB1k/-5ObVBfQHeUF8bd8vfeH28d9Cen7WHM_wCEwYBhgL/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://lh3.googleusercontent.com/-aXTWWuBXS-Q/XEVDXSCh_kI/AAAAAAAAB2E/asGj_91u9a0XxfRlFrCQLsfJyw9VTfMlACLcBGAs/h120/download%2B%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
32 Comments
saya belum tahu kalau ada caranya mengatur wedget seperti ini. tapi saya pakai wordpress. caranya sama atau beda ya.
ReplyDeleteSetau saya kalo yang wordpres agak susah untuk menggubah template mba, soalnya dia make ekstensinya PHP bukan HTML kayak blogspot. Bisa sih diubah tapi harus belajar PHP dulu mba hehe. Kalau mau lebih berwarna coba utak Atik fiturnya aja mba, kalau wordpress menang di fiturnya yang banyak tinggal download aja itu plugin nya
DeleteMaaf mbak ikutan nimbrung hehe..
DeleteUntuk wordpress sama aja mbak, bisa digunakan kode di atas menggunakan widget HTML.
Terimakasih tambahannya kak :)
DeleteNanti mau coba dulu mba, baru tau sih hehe.. makasih ya infonya..
ReplyDeleteSama sama mba semoga bisa sedikit membantu
Deletewah 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.
ReplyDeleteIya mba terimakasih, semoga dapat sedikit membantu
DeleteSaya ngak menyangka kalau ternyata masih ada blog wanita yang rela membuat kontent tutorial. Tulisannya bermanfaat Mbak, lanjutkan. :)
ReplyDeleteHehehehe soalnya kebetulan mengalami kang jadi sekalian aja dibikin konten biar nggak keluapaan nantinya
DeleteWaaaaah... ngerti teknis ngeblog juga ya mba, mantap euy :)
ReplyDeleteBaru ngerti dikit mba, nulis yang dilakuin aja takut lupa nanti kalo nggak ditulis
DeleteWah 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
ReplyDeleteSama sama mba semoga bisa sedikit membantu
DeleteWah.. 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
ReplyDeleteHihihi iya mba awalnya aku juga copas copas aja terus penasaran jadi ngerti deh lama lama
Deletewah terima kasih ilmunya ka :D
ReplyDeleteSama sama semoga bermanfaat :)
DeleteWah. Baru tahu. Oke sip mbak, bisa ditiru. Makasih yaaaa tutorialnya.
ReplyDeleteSemoga membantu mba :)
DeleteAda 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
ReplyDeleteWaa mba Heni makasih infonya aku akan coba deh :)
DeleteSaya juga pakai gini tapi yg vertical, noted buat yg horizontal, makasih sharingnya.
ReplyDeleteSama sama mba :)
DeleteYup! Saya juga menerapkan ini di blog saya. Cuma kalau saya, udah ubah ukurannya jadi lebih kecil. Jadi loadnya juga lebih ringan.
ReplyDeleteNice share!
Bener mba memang harus dikecilkan dulu baru dibuat kayak gini biar tambah ringan
DeleteOooh... 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
ReplyDeleteSemoga bisa membantu mba :)
DeleteWah makasig infonya mbak. Saya udah coba pake yang model horisontal.. tapi hasilnya gak teratur mbak (jarak2 gitu) ? Bagaimana supaya bisa teratur ya Mbak?
ReplyDeleteCoba utak Atik width dan height nya mba biar nemuin yang pas
DeleteThis comment has been removed by a blog administrator.
ReplyDeleteMakasih banyak mbak, bermanfaat banget. Setelah saya coba speed blog saya menjadi 62 . Bagaimana cara meningkatkan skala speednya menjadi cepat mbak?
ReplyDeleteTerimakasih Telah Mampir Silahkan tinggalkan pesan agar saya bisa mengunjungi balik. Komentar dengan link hidup akan saya hapus Terimakasih ^.^