--> ✓✓Cara Mengubah Tampilan Foto / Gambar di Blogger agar Mobile Friendly secara Otomatis -->

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


Daftar isi [Tutup]
    Advertisement
     

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

    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.

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

    Foto pada Blogger Mobile Friendly

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

     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.

    Perbedaan Foto Sebelum dan Sesudah Mobile Friendly

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

    Cara Mengubah Tampilan Foto / Gambar di Blogger agar Mobile Friendly secara Otomatis
    Kemudian setelah menggunakan kode html untuk mengatur lebar dan tinggi agar sesuai dengan ukuran layar mobile tampilannya sebagai berikut :
    Cara Mengubah Tampilan Foto / Gambar di Blogger agar Mobile Friendly secara Otomatis

    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 di blog ini yang ada foto / image nya, dan coba di lihat lagi.

    Lihat juga jam pada screenshoot di atas untuk melihat sebelum dan sesudahnya.

    Cara Membuat Foto atau Gambar di Blogger Mobile Friendly

    Kalau sudah percaya perbedaan tersebut, langsung saja berikut caranya untuk mengubah tampilan foto / image pada Blogger agar mobile friendly seperti di atas :
    1. Buka Blogger.com, login dengan akun Blogger Teman-Teman dan meluncur ke Tema ya Teman-Teman
      Cara Mengubah Tampilan Foto / Gambar di Blogger agar Mobile Friendly secara Otomatis


    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.
      Cara Mengubah Tampilan Foto / Gambar di Blogger agar Mobile Friendly secara Otomatis


    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?

    Penutup

    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


    Artikel Populer dan Iklan



    Dapatkan Artikel Terbaru Via Email


    2 comments

    1. Artikel bagus, yuk kunjungi website kami

      1. Halo Gan Rizal,

        Terimakasih sudah berkunjung, jangan lupa baca artikel yang lain juga ya, artikel ini cukup menarik lho Google Adsense Adalah merupakan artikel yang cocok kalau Anda seorang blogger dan mau menghasilkan uang melalui blog.

        Pembahasan lain yang mungkin membantu juga misalnya tentang Proxy Google Chrome dan ada trik dan tips juga untuk memudahkan ON/OFF Proxy.

        Terimakasih.