✓✓Cara Mengubah Tampilan Foto / Gambar di Blogger agar Mobile Friendly secara Otomatis
Daftar isi [Tutup]
✓✓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.
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.
Kemudian setelah menggunakan kode html untuk mengatur lebar dan tinggi agar sesuai dengan ukuran layar mobile tampilannya sebagai berikut :
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 :
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 :- Buka Blogger.com, login dengan akun Blogger Teman-Teman dan meluncur ke Tema ya Teman-Teman
- 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.
- Cari dan temukan kode html
]]></b:skin>
untuk memudahkan pakai CTRL+F dan paste kode tersebut - Opsi Pertama Copy dan Paste Kode dibawah ini tepat sebelum kode html poin 3
.mobile.post-body img{width:100%!important;height:auto!important;}
- Setelah itu Simpan Tema dan lihat perubahannya
Jika belum ada perubahan coba ke langkah Nomor 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
- 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. - 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;}
- 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
Kalau memang ada hambatan, silakan komentar ya, dan kalau bermanfaat bisa donk di share ke socmed Teman-Teman.
Semoga Bermanfaat,
Salam,
Syaf
« Newest
Newer Posts
Oldest »
Older Posts
bagus, alhamdulillah berhasil, makasih
siap. terimakasih sudah mampir gan