Mobile Template Blogger HP

Assalamualaikum wr.wb
Biasanya kita selalu menggaktifkan tampilan handphone untuk pembaca blogger dengan media handphone.
Sebenarnya dengan sedikit mengoprek css kita bisa memodifikasi tampilan untuk media handphone sesuka hati kita sendiri tanpa harus memilih atau mengaktifkan template mobile yang di sediakan oleh blogger tanpa harus kehilangan banyak fitur blog untuk pembaca dengan media handphone.
Cara memodifikasinya yaitu dengan css media (@media). Artinya kita bisa menyesuaikan tampilan yang berbeda-beda untuk setiap jenis media berdasarkan lebar dari media itu sendiri.
Contohnya kita bisa membedakan background atau kuran antar tampilan, seperti screen PC, hp beresolusi 240 pixel, atau hape beresolusi lebar 320 pixel. Dalam tiga media yang berbeda ini kita bisa membuat ketiga tampilan tersebut berbeda, baik background, ukuran, dan yang lainnya..
Tapi kelemahannya, css media ini hanya suport untuk browser operamini jika di handphone. Jika untuk browser-browser ternama di kelas PC, css media (@media) ini mampu di suport dengan baik. Tapi untuk kelas handphone hanya browser operamini yang mampu mensuportnya, jadi tidak suport untuk browser kelas rendah seperti bolt browser atau UCBrowser.

Cara menggunakan css media (@media) ini yaitu, sebelumnya kita buang dulu sitem variable definisi pada template blogger agar dengan mudah kita menambahkan banyak background dan yang lainnya pada selecktor yang sama dalam media (@media) yang berbeda, jika belum tahu cara menghapusnya, baca dahulu post cara menghapus variable definisi template blogger.

untuk menentukan css atau style di media yang beresolusi 640px adalah:

@media all and (max-width:640px)
{
selector
{
Proferty:value;
}
}

artinya bahwa style yang berada di dalam css media (@media) tersebut tidak akan berlaku untuk tampilan screen diatas resolusi layar 640px. Tapi akan berlaku untuk screen dengan resolusi 640px dan resolusi yang lebih rendah seperti 320px atau 240px.

Misalnya kita memberi style pada tampilan umum

body
{
background: red;
}
@media all and (max-width:640px)
{
body
{
background: blue;
}
}

Maka background untuk body ketika di lihat dari PC atau resolusi screen diatas 640 pixel adalah berwarna merah. Tapi background body tersebut akan berwarna biru jika dilihat dari layar screen selebar 640 pixel, 320 pixel atau 240 pixel.

Bagaimana untuk membuat perbedaan di layar screen dengan resolusi 320px dan 240px ?!. Caranya sama kita tinggal menambahkah css media (@media) untuk resolusi 320px dan 240px. Cranya sama yaitu seperti contoh di bawah ini.

@media all and (max-width:640px)
{
selector
{
Proferty:value;
}
}@media all and (max-width:320px)
{
selector
{
Proferty:value;
}
}@media all and (max-width:240px)
{
selector
{
Proferty:value;
}
}

template yang saya gunakan ini adalah contoh template dengan menggunakan css media (@media) yang saya modifikasi sendiri.

Jika anda bingung untuk memulainya, pertama-tama selesaikan css untuk tampilan PCnya dahulu. Setelah selesai copy saja seluruh cssnya kemudian letakan didalam css media (@media). Contoh dengan yang lebih mudah:

body
{
width: 100%;
background: #red;
padding: 25px;
}
#header
{
width:960px;
margin: 10px auto;
}
@media all and (max-width:320px)
{
body
{
width: 100%;
background: #red;
padding: 25px;
}
#header
{
width:960px;
margin: 10px auto;
}
}

Setelah dicopy kemudian edit css media-nya, untuk bagian yang tidka ingin di edit lebih baik di hapus saja. Misalnya kita hanya ingin mengedit lebar dari header dan padding dari body saja, maka yang lainya boleh kita hapus, misalnya mejadi seperti ini.

body
{
width: 100%;
background: #red;
padding: 25px;
}
#header
{
width:960px;
margin: 10px auto;
}
@media all and (max-width:320px)
{
body
{
padding: 0px;
}
#header
{
width:300px;
}
}

Maka pada resolusi layar 320px lebar header hanya 300px, mudahkan ? Pasti mudah deh.. Heheh

Mudah2an dapat di mengerti, saya mohon maaf untuk segala kekurangannya.. Wassalam.