Merubah Gambar Slider Dengan Mudah

Discussion in 'HTML & Website Design' started by mugianto, Mar 31, 2016.

  1. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    [​IMG]
    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:
    [​IMG]

    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.
    [​IMG]

    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)

    [​IMG]

    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:
    [​IMG]

    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:
    [​IMG]

    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.
    [​IMG]


    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.
    [​IMG]

    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.
     
  2. creative

    creative Well-Known Member

    Joined:
    Oct 24, 2014
    Messages:
    1,725
    Likes Received:
    160
    Trophy Points:
    63
    Google+:
    Wah keren ni sharingnya... tapi dengan adanya slide seperti itu apakah loading blognya makin tambah lambat Mas?
     
  3. KangAndre

    KangAndre Member

    Joined:
    Jan 25, 2014
    Messages:
    10,244
    Likes Received:
    2,714
    Trophy Points:
    413
    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.

    kumau.jpg
     
  4. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    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
     
  5. mugianto

    mugianto Member

    Joined:
    Mar 7, 2016
    Messages:
    419
    Likes Received:
    48
    Trophy Points:
    28
    Google+:
    Mesti banyak belajar nih sama sepuh @KangAndre skornya amaaazing banget ^_^ jadi iri
     
  6. creative

    creative Well-Known Member

    Joined:
    Oct 24, 2014
    Messages:
    1,725
    Likes Received:
    160
    Trophy Points:
    63
    Google+:
    Kalo ini ma.... namanya SALASATU :D:D
     
  7. Kuncen

    Kuncen Member

    Joined:
    Nov 12, 2016
    Messages:
    164
    Likes Received:
    5
    Trophy Points:
    18
    keren nih. terima kasih gan atas informasinya :)
     
Loading...

Share This Page