Merubah Gambar Slider Dengan Mudah

​

Selamat pagi Aden-aden dan Ajeng-ajeng Bersosial moga-moga gak bosen ya liat muka ane di sini hehehhe.
Menjawab pertanyaan yang sering ditanyakan 'Sohib-M' (Kawan Mugianto) tentang Bagaimana cara mengganti gambar pada slider makanya saya membuat artikel ini.

Kita langsung saja nyok praktekin.

Pertama kita mesti punya gambar penggantinya terlebih dahulu, dengan beberapa syarat. Ukurannya harus sama dengan gambar yang akan digantikan. Semisal gambar yang dulu ukurannya 900 px X 400 px, maka ukuran gambar penggantinya mesti sama.

Trus bobot gambar tersebut harus ringan, jadi setelah dibuat itu gambar pengganti bisa dikompress pake alat online. Banyak kok tinggal search aja dengan keyword kompress image.

Kedua browser kita harus punya alat Pengembang (Development Tools), biasanya setiap browser sudah ada alat ini, kalau blom ada cari aja extentionnya, kaya Firebug.

Sebelum berangkat Aden dan Ajeng Bersosial baiknya baca ini dulu untuk mengurangi kesalahan saat edit template di Blogger: 4 Hal Yang Perlu Dihindari Saat Edit Template Blogger


Kita masuk kehalaman yang ada slider yang gambarnya mau kita ganti, habis itu teken Ctrl+Shift+i (saya menggunakan Chrome) atau bisa klik menu hamburger di pojok kanan atas browser kaya ini gambarnya:

​

Panah merah diklik, trus kebawah kaya panah biru, lalu pilih Alat Pengembang.

Nanti alatnya muncil di kanan atau bisa juga di bawah browser, tergantung settingannya.

​

Trus kita klik dah alat penyorotnya (panah hitam), lalu kita sorot gambar yang mau kita ganti (merah) kemudian klik kiri 1x. Abis diklik alamat gambarnya akan di blok secara otomatis, lanjut kita perlu copy alamat gambarnya, klik dua kali aja itu tulisan yang diblok (biru) lalu teken Ctrl+C
untuk mengcopy.

Sekarang kita ke Edit HTML (panah hitam) pada Blogger, kalu wordpress fokus di Index php nya. Lalu klik satu kali badan template (warna merah), lalu tekan Ctrl+F untuk memunculkan mode pencari untuk bagian badan template (warna biru)

​

Masukin alamat gambar yang tadi kita copy trus teken enter, jika copynya tidak salah nanti kita akan diarahkan ke alamat yang kita cari (warna hijau) itu yang akan kita ganti alamatnya/tulisannya.

Sekarang kita buka dolo halaman posting, klik kanan aja Entri Baru/New ENtry trus pilih Buka tautan di tab baru seperti ini:

​

Kaya mau bikin postingan aja, kita langsung gunakan tool untuk ambil gambar (hitam-1) di klik jangan lupa, di tab upload (hitam-2) klik upload file (merah-3) kaya dibawah ini:

​

Lalu upload gambar yang tadi kita persiapkan untuk mengganti gambarnya, setelah terload klik gambar tersebut (biru-4), lalu klik add selected (hijau-5) nanti gambarnya masuk kedalam tempat postingan.

Ubah ukurannya jadi original diklik aja (hitam-6) lalu klik kanan gambar tersebut (merah-7) trus dipilih dah Salin alamat gambar (biru-8).

Langsung kita balik ke Edit HTML trus hapus alamat gambar yang lama dan ganti dengan yang baru kita copy/salin tadi.

​

Panah hitam di atas menunjukan alamat gambar yang telah kita ganti dengan yang baru, lalu klik Simpan Template (merah), jika sudah tersimpan kita longok dah blog/website kita klik aja lihat Blog (panah biru).

Jika berjalan lancar maka gambar yang tadi kita pilih untuk diganti akan berubah seperti ini.

​

Gampang kan gak terlalu susah, oh iya kalo mau merubah deskripsi di dalamnya, lakukan aja hal yang sama, tapi sorotnya ke kalimat deskripsi slidenya ya. Biasanya sih kalimat deskripsi sama gambar slider berada gak jauh, berdekatan banget, jadi perlu perhatiannya sedikit biar gak bolak balik.

Tulisan ini saya ambil dari artikel di Blog saya untuk jawaban ''Sohib-M' yang sering kesulitan mengganti gambar pada slidernya, dan semoga tulisan ini bisa membantu Aden dan Ajeng Bersosial dalam hal yang sama.

Semoga Bermanfaat
Salam
Mugianto

Note: Kalau ada salah dalam penulisan yang melanggar peraturan Bersosial mohon diberitahukan dengan vulgar, agar besok2 saya tidak mengulanginya kembali.

 

Wah keren ni sharingnya... tapi dengan adanya slide seperti itu apakah loading blognya makin tambah lambat Mas?

 

Jelas lebih lambat meskipun cuma beberapa detik. Namun di Google PageSpeed Insights skornya tidak berubah.
Saya coba pakai slide manual di salah satu blog saya http://www.kumau.info/ dengan 3 gambar yang saya rasakan loading melambat berbeda jika tidak pakai.

Spoiler: hasil skor

 

Asal gak terlalu lebay aja slidernya den, cari yang simpel2 aja. Saya aja pakai Flexslider yang gak terlalu banyak penggayanya, kalo soal loading sudah pasti menambah beban muatan blog

 

Mesti banyak belajar nih sama sepuh @KangAndre skornya amaaazing banget ^_^ jadi iri

 

Kalo ini ma.... namanya SALASATU

 

keren nih. terima kasih gan atas informasinya