CSS untuk mengatur ukuran Gambar dan element Header versi mobile Blogspot

Diposkan: 05 Agustus, 2014

Anda termasuk mengaktifkan template blogger versi mobile setelan khusus/custom ?, namun kebingungan ingin mengatur gambar header yang di versi mobile.

Umumnya header versi mobile blogger ketika kita menggunakan gambar sebagai header, di versi desktop pas dan cocok dengan yang di inginkan, namun ketika di versi mobile akan terlihat agak aneh atau kurang sreg gitukan.

Dan apabila kita melihat di versi mobile di komputer, maka gambar header hampir memenuhi layar bukan?, dan membuat tidak enak di pandang. Bisakah untuk mengatur ulang gambar header versi mobile?, Jawabannya "bisa" namun harus memilih setelan khusus untuk versi mobile blognya.

Mengatur element header versi mobile blog dengan CSS

.mobile #header1 {
width: 120px;  //sesuaikan lebar
height: 30px;  //sesuaikan tinggi
}

Mengatur ukuran lebar dan tinggi Header gambarnya saja

.mobile img#Header1_headerimg {
width: 120px;  //sesuaikan lebar
height: 30px;  //sesuaikan lebar
}

Menempatkan kode CSS supaya hanya tampil di versi mobile saja dan tidak termasuk desktop, Yaitu dengan mengelilingi dengan tag conditional mobile dan bisa di tempatkan di atas tag </head>.

Contoh :
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
.mobile #Header1 {
height: 25px;
width: 120px;
}
</style>
</b:if>

Untuk mengeceknya di desktop blognya versi mobile tambah string di url address bar (?m=1).

7 komentar

  1. berhasil gan, thanks silahkan cek http://bangsantri.blogspot.co.id/?m=1

    BalasHapus
  2. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  3. untuk merubah tampilan homepage versi mobile bagaimana ya supaya ada gambar kecil di homepage bukan tulisan artike saja,makash

    BalasHapus
  4. kurang jelas gan.. tolong contohin cara peletakannya..setiap kode di atas..tks

    BalasHapus
  5. Mantap gan tutorialnya, tapi kalo template responsive seperti blog ane https://lozkomik.blogspot.com biar gambarnya full rata kanan dan kiri itu gimana ya? Soalnya pingin bikin web komik ini.

    BalasHapus
  6. Berhasil gan ini tampilan di website saya WWW.OKAYIM.BIZ.ID

    BalasHapus