CARA MEMPERBAIKI TAMPILAN GAMBAR TIDAK PROPORSIONAL BENTUKNYA PADA KONTEN BLOG | editblogtema editblogtema: CARA MEMPERBAIKI TAMPILAN GAMBAR TIDAK PROPORSIONAL BENTUKNYA PADA KONTEN BLOG

Logtema

×
tutorial dan teknik

CARA MEMPERBAIKI TAMPILAN GAMBAR TIDAK PROPORSIONAL BENTUKNYA PADA KONTEN BLOG

Sobat pernah membeli atau memakai template premium atau versi gratis buatan pihak ketiga? Jika pernah sobat mungkin pernah mengalami problem begini:
tampilan pada layar gagdet yang lebar
Tablet yang sering saya pakai buat ngeblog

Tampilan gambar thumbnail pada homepage atau halaman awal tidak masalah tetapi ketika membuka konten dan membaca halaman baru terlihat bentuk gambar yang tidak proporsional kadang terlihat lebih tinggi berbanding lebar atau sebaliknya lebih lebar berbanding tinggi.

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.

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
Dan lihat gambar setelah dilakukan perbaikan:

Tampilan gambar pada konten blog setelah diperbaiki
Contoh diatas 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:

CARA MEMPERBAIKI PERTAMA 

  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

Lihat demo (cobakan di laptop dan hape sekaligus gambar sudah mantap). Yang berminat pada templat ini kami sediakan gratis :)

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

CARA MEMPERBAIKI KEDUA UNTUK THUMBNAIL PADA HOMEPAGE 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

Bagikan (share):

5 comments:

  1. Makasih tipsnya mas. Gambarnya jd lebih proporsional ya

    ReplyDelete
  2. terkadang memang beda aplikasi dan paltform bisa membuat gambar jadi berantakan mas ya,..enggak enak dilihat,..cara ini boleh dipakai nih untuk mengatasinya

    ReplyDelete
  3. Bener ya kak terkadang emang sering kaya gini tampilannya.. semoga bisa membantu yang mengalam hal dan kendala yang sama

    ReplyDelete
    Replies
    1. Makasih, say. Saya memang suka berbagi rasanya lega kalau sudah menulis he he he

      Delete

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan