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://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 

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://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 

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://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. 

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
Next Post Previous Post
28 Comments
  • lia
    lia January 24, 2019

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

    • Seftinaqurnia
      Seftinaqurnia January 25, 2019

      Sama sama mba semoga bisa sedikit membantu

  • Sashy
    Sashy January 24, 2019

    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.

    • Seftinaqurnia
      Seftinaqurnia January 25, 2019

      Iya mba terimakasih, semoga dapat sedikit membantu

  • Kang Nata
    Kang Nata January 24, 2019

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

    • Seftinaqurnia
      Seftinaqurnia January 25, 2019

      Hehehehe soalnya kebetulan mengalami kang jadi sekalian aja dibikin konten biar nggak keluapaan nantinya

  • Dian
    Dian January 24, 2019

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

    • Seftinaqurnia
      Seftinaqurnia January 25, 2019

      Baru ngerti dikit mba, nulis yang dilakuin aja takut lupa nanti kalo nggak ditulis

  • Lailin
    Lailin January 24, 2019

    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

    • Seftinaqurnia
      Seftinaqurnia January 25, 2019

      Sama sama mba semoga bisa sedikit membantu

  • ewafebri
    ewafebri January 24, 2019

    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

    • Seftinaqurnia
      Seftinaqurnia January 25, 2019

      Hihihi iya mba awalnya aku juga copas copas aja terus penasaran jadi ngerti deh lama lama

  • Flo fairy
    Flo fairy January 25, 2019

    wah terima kasih ilmunya ka :D

    • Seftinaqurnia
      Seftinaqurnia January 26, 2019

      Sama sama semoga bermanfaat :)

  • Ria Rochma
    Ria Rochma January 26, 2019

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

    • Seftinaqurnia
      Seftinaqurnia January 30, 2019

      Semoga membantu mba :)

  • Heni Prasetyorini
    Heni Prasetyorini January 27, 2019

    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

    • Seftinaqurnia
      Seftinaqurnia January 30, 2019

      Waa mba Heni makasih infonya aku akan coba deh :)

  • Sera Wicaksono
    Sera Wicaksono January 27, 2019

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

    • Seftinaqurnia
      Seftinaqurnia January 30, 2019

      Sama sama mba :)

  • Vindy Putri
    Vindy Putri January 29, 2019

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

    • Seftinaqurnia
      Seftinaqurnia January 30, 2019

      Bener mba memang harus dikecilkan dulu baru dibuat kayak gini biar tambah ringan

  • Shireishou
    Shireishou January 30, 2019

    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

    • Seftina Qurniawati
      Seftina Qurniawati February 06, 2019

      Semoga bisa membantu mba :)

  • Siska Dwyta
    Siska Dwyta February 07, 2019

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

    • Seftinaqurnia
      Seftinaqurnia February 10, 2019

      Coba utak Atik width dan height nya mba biar nemuin yang pas

  • hungryworm__
    hungryworm__ March 15, 2019

    This comment has been removed by a blog administrator.

  • Unni riska
    Unni riska March 23, 2019

    Makasih banyak mbak, bermanfaat banget. Setelah saya coba speed blog saya menjadi 62 . Bagaimana cara meningkatkan skala speednya menjadi cepat mbak?

Add Comment
comment url