CSS untuk mengatur ukuran Gambar dan element Header versi mobile Blogspot

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).