CARA MEMPERBAIKI GAMBAR YANG TAMPIL TIDAK PROPORSIONAL PADA HOMPAGE DAN POSTINGAN BLOGGER MOBILE

Cara memperbaiki tampilan gambar pada homepage dan postingan blogger versi mobile
Sobat pernah membeli atau memakai template premium atau versi gratis buatan pihak ketiga? Jika pernah sobat mungkin pernah mengalami masalah yang menjadi topik postingan kami kali ini. Template template tersebut dibuat berdasarkan template bawaan generasi ke-2 namun desain-nya masih belum generasi ke 3. Ini juga bisa terjadi pada template template versi ke 2 bawaan blogger seperti: tema sederhana, awesome, perjalanan dst..dst dan bisa juga terjadi jika kalian membeli template dari Gooyabi, Btemplate dsb, jika template tersebut masih di kembangkan berdasarkan template bawaan yang lebih lama (sebelum template template seperti contempo, soho, emporio dan notable di rilis oleh Google)
memperbaiki gambar yang tampil tidak proporsional pada blogger mobile
gambar proporsional

Tampilan gambar thumbnail pada homepage atau halaman awal maupun tampilan gambar ketika membuka konten dan membaca halaman akan kedapatan bentuk gambar yang tidak proporsional kadang terlihat lebih tinggi berbanding lebar atau sebaliknya lebih lebar berbanding tinggi. Wah mengganggu visual mata saja bukan.

TERJADI PADA SAAT DIBUKA MELALUI LAYAR MOBILE

Zaman now jangan remehkan tampilan konten terutama gambar pada saat dibuka melalui layar mobile (hape atau ponsel) karena 75% trafik pengunjung bisa datang dari perangkat mobile, bukan laptop apalagi PC. Jangan berfikir seperti 10 tahun yang lalu. Penghasilan dari jualan online juga adalah karena pengunjung datang dari mengakses layar telponi setiap hari, sudah sangat jarang melalui laptop apalagi desktop.

Contoh gambar dibawah adalah tampilan gambar tidak proposional didalam konten blog, ini sangat merugikan terutama terjadi pada saat dibuka melalui layar kecil hape:

tampilan gambar konten blog sebelum diperbaiki
Gambar di atas yang kami maksudkan tidak proporsional perbandingan tinggi dan lebarnya. Jadi memang jelek sekali di pandang mata. Dan lihat gambar setelah dilakukan perbaikan:

Tampilan gambar pada konten blog setelah diperbaiki
Contoh diatas jika gambar ketinggian namun ada juga yang terlalu lebar  dan ini terjadi pada thumbnail homepage tampilan mobile, seperti contoh:
gambar terlalu lebar pada homepage tampilan hape/mobile
Ada dua cara memperbaikinya:

1. CARA MEMPERBAIKI TAMPILAN THUMBNAIL PADA HOMEPAGE MOBILE YANG TAMPAK JELEK.

  1. Masuk ke pengaturan blogspot
  2. Pilih Tema
  3. Pilih "Sesuaikan"
  4. Setelah masuk ke Desainer Tema Blogger: Pilih lanjutan
  5. Scroll menu dropdown yang muncul keatas, dan pilih "Tambahkan CSS"
  6. Copy kode CSS dibawah ini dan Pastekan ke dalam kotak dialog css yang muncul: 
    pastekan kode css kedalam kotak ini

/* fit images to container */.container img {    max-width: 100%;    height: auto;}

Save template. 

Ini biasanya terjadi pada tema tema Gooyabi dan solaris. Namun juga bisa terjadi pada template template default bawaan blogger seperti template sederhana (simple), PT. Keren Sekali, Jendela gambar, Perjalanan dst.

Perhatian: Ini mungkin bisa berlaku efektif pada beberapa jenis template terbaru, namun bisa tidak berpengaruh terhadap tema klasik yang sudah di kustom.

2. CARA MEMPERBAIKI GAMBAR PADA TAMPILAN POSTINGAN MOBILE:

Cara kedua ini apabila sobat menggnakan template default atau bawaan blogspot seperti template sederhana, caranya:
  • Masuk kepengaturan blogspot
  • Pilih tema atau theme
  • Pilih Edit HTML, dan ketika halaman editor HTML blogspot telah terbuka, cari kode berikut (gunakan ctrl+f untuk mempercepat pencarian)
 @media screen and (max-width:414px){
        .Image-thumb img{height:150px; border: none;}
        .Image-thumb{float:none;width:100%;margin:0 0 5px 0;}
        .jump-link, .post-info{text-align: center;}
      }
      @media screen and (max-width:240px) {
        .Image-thumb{display: none;}
      }
Ya itu adalah kode @media screen untuk ukuran layar kecil, disanalah biang kerok mengapa gambar thumbnail tidak proporsional pada homescreen mobile atau hape. Perhatikan nilai yang diberikan pada .Image-thumb img {height: 150px;......sementara dibawahnya width tertulis dengan nilai 100%.

Robah angka atau nilai 150px; menjadi 100%; maka semuanya berubah menjadi normal. Pokoknya jika width adalah 100% maka height harus 100% pula untuk dimensi gambar thumbnail.
DEMO
https://www.tiktok.com/@editvlogtema

9 komentar

  1. Makasih tipsnya mas. Gambarnya jd lebih proporsional ya
    1. Sama sama, mas :)
  2. terkadang memang beda aplikasi dan paltform bisa membuat gambar jadi berantakan mas ya,..enggak enak dilihat,..cara ini boleh dipakai nih untuk mengatasinya
  3. Bener ya kak terkadang emang sering kaya gini tampilannya.. semoga bisa membantu yang mengalam hal dan kendala yang sama
    1. Makasih, say. Saya memang suka berbagi rasanya lega kalau sudah menulis he he he
  4. Haiii Kak... Aku tuh dari kemarin2 udah kepo soal ini, eh akhirnya aku menemukan artikelnya di sini dong. Aku ingin kasih nilai 100 ke Kakak karena udah berhasil membantuku menyeimbangkan gambar di blogku. Makasih banyak Kak, caranya sederhana dan dijelaskan dengan baik pula.
  5. alhamdulillah...trimakasih ternyata bisa
  6. Numpang nanya kalau gambar artikel saat dishare renyek gitu gmna ya? Saya pakai template kang mousir udah cari cari tutornya ga aada
    1. Renyek itu gimana bentuknya maksudnya detailnya...maaf biar jelas he he he
Silahkan berkomentar sesuai dengan topik kita ya...
editbloginfo © EDITBLOGTEMA. Developed by Jago Desain