Senin, 31 Januari 2011

Blogger Tampilan HP dengan Mobify

 http://lh3.ggpht.com/_hRGvypdJ8P8/TAPANi1dRMI/AAAAAAAABUs/shWJ0I56UFs/mobify_thumb1.jpg
Versi mobile di sebuah situs sepertinya telah menjadi suatu standar mengingat semakin meluasnya penggunaan ponsel sebagai alat jelajah situs. Dengan adanya versi mobile, kita akan semakin mudah mengakses situs-situs favorit lewat ponsel dengan tampilan dan navigasi yang nyaman, serta biaya yang relatif murah tentunya.
Dan disini saya akan memberikan Tutorial membuat blog versi ponsel dengan mobify, gambar dibawah ini adalah tampilan ponsel blog ini yang diakses melalui opera mini dengan domain mobile.kanashibari.co.cc
Kenapa Mobify? Karena mobify memiliki keunggulan tersendiri dibanding situs penyedia website versi mobile lainnya, keunggulan yang ditawarkan mobify adalah kita dapat mengatur sendiri tampilan mobile kita secara bebas dengan css secara penuh, tidak seperti website lainnya yang telah menyediakan template yang telah jadi sehingga kita tidak dapat mengubah tampilan nya dan kita juga dapat menggunakan sub domain sebagai domain versi mobile kita sehingga traffic blog yang mengakses blog kita melalui ponsel tetap kita dapatkan. Terlebih lagi, Mobify juga mendukung berbagai tipe ponsel yang ada di pasaran saat ini seperti iPhone, BlackBerry, Android, dan 5000 lebih tipe ponsel lainnya. Dan ternyata, banyak website luar negeri yang menggunakan jasa Mobify untuk menciptakan website mini yang tampil di ponsel, seperti MTV, SitePoint, Boingboing, Smashingmagazine, Discover Magazine, dan masih banyak lagi. Untuk cara mengubah domain blog mobify ke custom domain seperti mobile.kanashibari.co.cc dapat anda lihat disini. Bagaimana anda tertarik untuk membuatnya? baik langsung saja. Langkah pertama yang harus anda lakukan adalah melakukan pendaftaran di mobify disini setelah anda berhasil melakukan pendaftaran, ikuti langkah2 berikut: 

1. Masukan alamat blog Anda ke form ‘Create a new mobile view’ dan ‘Click here to begin!’
2. Selanjutnya Anda akan diberikan panduan dan masuk ke halaman ‘Choose’, ada tiga tahapan, yaitu 'Choose', 'Design' dan 'Manage' seperti gambar dibawah ini
image
3. Pada halaman ‘Choose’, Anda akan disuguhi tampilan utuh dari halaman indeks (halaman utama) blog Anda. Pilih bagian mana saja yang sekiranya perlu untuk ditampilkan di tampilan mobile nanti.
 (klik untuk memperbesar gambar)


4. Setelah selesai memilih pada halaman ‘Choose’, klik Design untuk masuk ke langkah selanjutnya.
(klik untuk memperbesar gambar)
Halaman ‘Design’ terbagi menjadi dua kolom, yaitu kolom CSS di sebelah kiri dan kolom pratinjau (preview) di sebelah kanan.  
- perhatikan kolom preview, apakah urutan (posisi) bagian yang telah Anda pilh pada halaman ‘Choose’ telah tepat? bila belum klik untuk menandai bagian yang ingin dipindah, lalu pada kolom CSS klik move up atau move down (Anda juga dapat menghapus bagian yang tak diperlukan dengan 
meng-klik delete)
- Pada kolom CSS, Anda dapat menambahkan bagian baru dengan menambahkan kode-kode HTML maupun CSS di opsi New Block (perhatikan gambar di atas). Karena sebelumnya (pada halaman ‘Choose’) tak memilih header, saya menambahkan kode untuk header pada New Block (dengan menambahkan tulisan Di Atas Bumi > serta kode untuk background dan juga border).
- Perhatikan lagi kolom CSS, silakan diedit sesuai dengan selera (sebagai contoh dan inspirasi, dapat dilihat di Gallery Mobify). Anda dapat menambah, mengurangi bagian yang tak perlu (seperti CSS bawaan blogger, karena tak mempengaruhi tampilan mobile). Anda dapat melihat perubahan pada bagian preview untuk memantau perubahan yang telah Anda lakukan pada bagian CSS. Jangan lupa untuk klik save seusai mengedit. 
5. Sampai di sini pengeditan halaman utama tampilan mobile Anda telah selesai. Selanjutnya klik ’Manage’, lalu perhatikan bagian MOBIFIED TEMPLATES dan SUGGESTED TEMPLATES.
(klik untuk memperbesar gambar)
Pada bagian SUGGESTED TEMPLATED, Anda dapat melihat path mana saja yang belum diedit (seperti path untuk halaman postingan, kategori dan arsip). Langkah selanjutnya sama dengan langkah untuk mengedit atau mendisain halaman utama.

6. Bila semua dirasa cukup (pengeditan selesai), langkah terakhir adalah mengaktifkan versi mobile dari blog Anda. Klik live (atau klik DEPLOY). Kemudian Anda akan dibawa ke halaman ini
(klik untuk memperbesar gambar)
Di halaman tersebut (Deploy) Anda dapat menentukan alamat untuk blog versi mobile Anda, misalnya kanashibari2.mobify.me. Lebih lanjut, Anda dapat menggunakan custom domain sebagai alternatif seperti m.domainanda.com atau mobile.kanashibari.co.cc untuk melihat tutorial cara mengubah domain blog mobify ke sub domain klik disini

Selanjutnya copas (copy paste) kode yang tersedia sebelum kode </head>
Lalu simpan template Anda. selamat karena sekarang blog anda telah memiliki tampilan versi ponsel :)

8 Komentar:

Angga Creativity mengatakan... (Reply)

thank, infonya sangat bermanfaat..

Krisna mengatakan... (Reply)

@Angga Creativity

iya, sob sama2,, makasih juga dah mampir.. :D

fadlieha mengatakan... (Reply)

tipsnya mantap gan. salam blogger www.fadlieha.co.cc

Krisna mengatakan... (Reply)

@fadlieha

mkasih gan, salam blogger :D
semoga sukses

pujangga rahasia mengatakan... (Reply)

pasang background nya kok sulit sob,,,,,

Admin Banvill mengatakan... (Reply)

ijin nyimak sob

Anak bandel mengatakan... (Reply)

mas aku udah coba tapi jelek :-(

DennisFrea mengatakan... (Reply)

Mantap mas, makasih tutorialnya+custom sub-sub-domain co.ccnya hehe. Jadi nggak jadi bikin wordpress self hosted nih kayaknya hehe Ditunggu kunjungan baliknya mas

Posting Komentar