-->

Cara Mengubah Tampilan Foto / Gambar di Blog agar Mobile Friendly secara Otomatis

Daftar isi [Tutup]


    Halo Teman-Teman,

    Resah Gundah Gulana Galau ini terobati sudah. Sory, lebay ya, tidak apa-apa deh dianggap begitu, karena memang sejak lama bingung dengan tampilan Gambar/Foto di mobile yang ukurannya tidak tepat,  ukuran panjang lebar nya tidak tepat.

     Per hari ini selesai sudah permasalahan itu, situs sudah mobile friendly, dan juga gambar/foto juga sudah mobile friendly. Blog ini semakin enak deh di lihat menggunakan Smartphone temen-temen.

     Yap, berkat berseluncur di dunia maya pagi ini, akhirnya dapat kode html yang membuat foto/gambar akan secara otomatis mengikuti lebar dan tinggi dari Smartphone Teman-Teman.

    Kalau tampilan blog Teman-Teman sudah mobile friendly beserta ukuran image/foto syukurlah, karena mungkin bawaan tema dari blog Teman-Teman sudah support untuk itu. Namun bagi Teman-Teman yang Tema Bawaan belum support mungkin gundah gulana seperti yang Admin alami juga hehe

    Awalnya dengan pengaturan foto / gambar di menu edit post/entry post dengan pilihan Large / Extra Large, membuat tampilan di Desktop / Komputer terlihat sesuai dan enak di lihat, namun ketika post yang sama di lihat di Mobile akan "peat peot" tampilan tidak pas tinggi dan lebarnya, dengan menambah satu baris kode html permasalahan itu selesai sudah.

    Yuk langsung saja kita lihat perbedaannya. Sebelum memakai kode html untuk mengatur foto / gambar tampilannya sebagai berikut :


    Kemudian setelah menggunakan kode html untuk mengatur lebar dan tinggi agar sesuai dengan ukuran layar mobile tampilannya sebagai berikut :

    Kira - kira perbedaanya seperti itu Teman-Teman, versi Admin tampilan seperti itu sudah cocok dan enak untuk di lihat, bagaimana? Ya kalau tidak percaya langsung saja ke post lain yang mungkin ada foto / image nya, dan coba di lihat lagi. Lihat juga jam pada screenshoot di atas untuk melihat sebelum dan sesudahnya.

    Kalau sudah percaya perbedaan itu nyata, langsung saja berikut caranya untuk mengubah tampilan foto / image seperti di atas :
    1. Buka Blogger.com, login dengan akun Blogger Teman-Teman dan meluncur ke Tema ya Teman-Teman
    2. Pilih Edit Tema, eits, jangan lupa untuk lakukan Backup Tema ya, jaga-jaga kalau tidak berhasil, kita bisa mengembalikan Tema ke posisi terakhir sebelum diubah-ubah untuk mengubah tampilan image / foto.
    3. Cari dan temukan kode html ]]></b:skin>, untuk memudahkan pakai CTRL+F dan paste kode tersebut
    4. Opsi Pertama Copy dan Paste Kode dibawah ini tepat sebelum kode html poin 3

      .mobile.post-body img{width:100%!important;height:auto!important;}
    5. Setelah itu Simpan Tema dan lihat perubahannya

      Jika belum ada perubahan coba ke langkah Nomor 6
    6. Opsi Kedua bisa jadi ada html lain yang fungsinya mirip dengan poin 4 (post body image), dan akhirnya logic di html nya menjadi bentrok, kita akan ubah fungsi Post Body Imagenya dengan cara di bawah ini
    7. Cari dan temukan kode .mobile.post-body img, jika yang ditemukan .mobile.post-body img {max-width:100%} tidak apa-apa Teman-Teman, kita akan mengubah kode sumber yang ada di dalam tanda kurung kurawal, isi dari tanda kurung kurawal bisa jadi berbeda yang ditemukan oleh Teman-Teman, karena mungkin beda Tema beda juga kode sumbernya.
    8. Ganti yang ada dalam tanda kurung kurawal dengan width:100%!important;height:auto!important; sehingga nanti menjadi

      .mobile.post-body img{width:100%!important;height:auto!important;}
    9. Lanjut pilih Simpan Tema, lalu cek foto pada post tertentu yang Teman-Teman punya apakah sudah berhasil?

    Bagaimana Teman-Teman? Apakah sudah clear? Berhasilkah?

    Kalau memang ada hambatan, silakan komentar ya, dan kalau bermanfaat bisa donk di share ke socmed Teman-Teman.

    Semoga Bermanfaat,
    Salam,
    Syaf


    Kotak Penelusuran




    Comments