cara membuat template mobile view manual

1. Cara membuat template blog versi mobile view
2. Gimana Cara membuat template versi mobile blog
3. Cara Trik Membuat Blog Tampilan Versi Mobile view
4. cara membuat blog auto windows sendiri

Mas ihsan,- Posting ini adalah kali kedua setelah lama vakum di pengujung tahun baru 2012, masih dengan topik yang lama, kali ini saya akan menampilan artikel yang menjadi request teman sesama blogger di salah satu komentar nya, mari langsung saja kita pelajari.

Seperti kita ketahui Ngeblog adalah wahana yang sangat menarik untuk selalu di ikuti, terlebih banyak sekali cara-cara baru yang akan selalu hadir seiring berjalan nya waktu, atau bisa jadi trik lama yang selalu menarik untuk di ulas kembali.

Dalam kesempatan kali ini kita mulai pembelajaran dengan cara membuat template mobile blogger sendiri, kenapa saya memilih topik ini, karena saat ini kebutuhan akan gatget semakin meningkat, apalagi semakin hari semakin canggih, membuat blog kita perlu di parsing agar bisa dengan mudah di akses menggunakan handphone, tanpa harus mengurangi tampilan di komputer, dengan begitu pengunjung pun akan semakin betah berlama-lama di blog kita, dengan browser apapun.

Langsung saja mari kita lanjutkan pembahasan kita.

Sebenarnya ada dua macam membuat template kita menjadi mobile view, dengan menggunakan parsing template dan juga media screen ( akan di bahas dalam postingan yang akan datang ), namun saya akan menerapkan yang pertama dahulu, cekidot!!.

Pertama yang harus kita lakukan adalah, memisahkan tekhnik menjadi beberapa bagian, simak baik-baik di bawah ini.

.::NB::.

untuk pengeditan bisa anda gunakan x-plore bagi pengguna handphone seperti saya, atau bisa dengan
Login blogger > rancangan > edit html > expand widget
1. CSS

Download template bawaan blogger anda melalui Rancangan > Edit HTML.

Hal ini dikarenakan template asli bawaan blogger lebih lengkap dan lebih valid datanya, atau bisa juga template lain yang tersedia gratis di mana-mana.
pelajari struktur CSS nya.

Sebelum melangkah lebih jauh, sebaik nya anda pelajari tentang CSS atau Cascading Style Sheet. Yaitu sebuah element penentu warna dan posisi sebuah situs, bila anda sudah memahami nya, sekarang lanjutkan.

Tentukan warna dan posisi situs anda, berupa tampilan - tampilan yang menarik menurut anda.

2. Struktur template

Bagilah halaman blog anda menjadi 4 (empat) bagian.

1. header
2. body kiri
3. body kanan
4. footer

header

Terdiri dari nama blog, deskripsi blog, dalam beberapa template biasanya terbagi menjadi kanan dan kiri.

body kiri

Terdiri dari tempat menampilkan posting dan kolom komentar atau bisa di sebut post body.
di pisahkan dengan atribut FLOAT menjadi float:left;

body kanan

Terdiri dari widget atau biasa di sebut sidebar blog.
atribut yang di gunakan adalah float:right;

footer

Ini adalah bagian bawah situs anda.

Setelah anda menerapkan kedua hal di atas, maka anda sudah berhasil membuat kerangka template anda.

Kemudian cari ukuran lebar (width) di dalam template tersebut, biasa nya terdiri dari Lebar ukuran penuh di bagi Lebar kanan dan kiri.

Contoh:

Body{ width:950px }

.Kiri { width:610px }

.Sidebar { width:300px }

Bila template anda masih dalam keadaan normal seperti di atas, maka saat di buka menggunakan handphone atau komputer akan sama saja, yaitu tampilan fullsite yang berat.
Ganti atribut width menjadi max-width

Contoh:

Body{ max-width:950px }

.Kiri { max-width:610px }

.Sidebar { max-width:300px }

Dengan adanya perubahan di atas, maka template anda akan terlihat mobile view ( atas bawah ) bila di buka dari browser handphone, sedangkan akan melebar bila dilihat dari komputer.

Untuk dasar pembuatan mobile view hanya sederhana saja, seperti contoh di atas.
untuk style yang lain
Silahkan berkreasi lebih agar tampilan situs anda lebih sempurna.

Bila anda belum paham silahkan ajukan pertanyaan di kolom komentar.
Semoga berhasil.