Tips Meringankan Loading Blog Dengan Menggabungkan Widget Gambar

Widget adalah suatu kumpulan html yang dipasang pada blog. Widget dalam blog disebut juga gadget. 

loading page

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. 

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

SIDEBAR

2. Lihat di bagian side bar kemudia klik Add gadget

3. Pilih HTML/JavaScript


ADD EX


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 

footer



  • 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 

FOOTER


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. 

Waran Ungu : dapat diganti dengan ukuran sesuai dengan yang kalian inginkan 

Hasilnya 

footer


Dari ketiga cara menggabungkan gambar widget diatas aku menggunakan pad sidebar.

Dan tentu saja setelah aku cek menggunakan pagespeed insight nilai ku 99.

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

Post a Comment

30 Comments

  1. saya belum tahu kalau ada caranya mengatur wedget seperti ini. tapi saya pakai wordpress. caranya sama atau beda ya.

    ReplyDelete
    Replies
    1. Setau 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

      Delete
    2. Maaf mbak ikutan nimbrung hehe..

      Untuk wordpress sama aja mbak, bisa digunakan kode di atas menggunakan widget HTML.

      Delete
    3. Terimakasih tambahannya kak :)

      Delete
  2. Nanti mau coba dulu mba, baru tau sih hehe.. makasih ya infonya..

    ReplyDelete
    Replies
    1. Sama sama mba semoga bisa sedikit membantu

      Delete
  3. 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.

    ReplyDelete
    Replies
    1. Iya mba terimakasih, semoga dapat sedikit membantu

      Delete
  4. Saya ngak menyangka kalau ternyata masih ada blog wanita yang rela membuat kontent tutorial. Tulisannya bermanfaat Mbak, lanjutkan. :)

    ReplyDelete
    Replies
    1. Hehehehe soalnya kebetulan mengalami kang jadi sekalian aja dibikin konten biar nggak keluapaan nantinya

      Delete
  5. Waaaaah... ngerti teknis ngeblog juga ya mba, mantap euy :)

    ReplyDelete
    Replies
    1. Baru ngerti dikit mba, nulis yang dilakuin aja takut lupa nanti kalo nggak ditulis

      Delete
  6. 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

    ReplyDelete
    Replies
    1. Sama sama mba semoga bisa sedikit membantu

      Delete
  7. 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

    ReplyDelete
    Replies
    1. Hihihi iya mba awalnya aku juga copas copas aja terus penasaran jadi ngerti deh lama lama

      Delete
  8. wah terima kasih ilmunya ka :D

    ReplyDelete
  9. Wah. Baru tahu. Oke sip mbak, bisa ditiru. Makasih yaaaa tutorialnya.

    ReplyDelete
  10. 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

    ReplyDelete
    Replies
    1. Waa mba Heni makasih infonya aku akan coba deh :)

      Delete
  11. Saya juga pakai gini tapi yg vertical, noted buat yg horizontal, makasih sharingnya.

    ReplyDelete
  12. Yup! Saya juga menerapkan ini di blog saya. Cuma kalau saya, udah ubah ukurannya jadi lebih kecil. Jadi loadnya juga lebih ringan.
    Nice share!

    ReplyDelete
    Replies
    1. Bener mba memang harus dikecilkan dulu baru dibuat kayak gini biar tambah ringan

      Delete
  13. 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

    ReplyDelete
  14. Wah makasig infonya mbak. Saya udah coba pake yang model horisontal.. tapi hasilnya gak teratur mbak (jarak2 gitu) ? Bagaimana supaya bisa teratur ya Mbak?

    ReplyDelete
    Replies
    1. Coba utak Atik width dan height nya mba biar nemuin yang pas

      Delete

Terimakasih Telah Mampir Silahkan tinggalkan pesan agar saya bisa mengunjungi balik. Komentar dengan link hidup akan saya hapus Terimakasih ^.^