CARA MEMPERBAIKI GAMBAR YANG TAMPIL TIDAK PROPORSIONAL PADA HOMPAGE DAN POSTINGAN BLOGGER 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)

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:

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:

Contoh diatas jika gambar ketinggian namun ada juga yang terlalu lebar  dan ini terjadi pada thumbnail homepage tampilan mobile, seperti contoh:

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: 
   

/* 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