Blogger Versi Mobile dengan Mobify

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 (Dunia di Genggaman Anda)mobify12

Lalu bagaimana cara menjadikan blog kita ramah untuk tampilan mobile atau ponsel (penasaran)?

Ada beberapa macam cara yang dapat kita lakukan untuk menjadikan blog kita (dengan mesin Blogger) siap menghadapi era yang serba mobile ini (halah). Beberapa di antaranya adalah dengan memanfaatkan layanan gratis dari mippin, dotmobi, atau pun mofuse. Namun kali saya takkan membahas ketiganya (lho?). Secara subjektif, saya lebih menyukai layanan dari Mobify, karena selain relatif mudah diaplikasikan pada blogger/blogspot, Mobify juga secara otomatis mendeteksi media (devices) yang kita gunakan dan mengarahkannya ke tampilan mobile.

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

Dan inilah tampilan mobile blog ini (gambar diambil menggunakan Opera Mobile for Windows):
 berandabumi
Tampilannya memang sengaja dibuat sederhana, tanpa adanya gambar (image) pada halaman utama (selain untuk kemudahan akses, juga untuk menghemat pulsa tentunya hehe…). Bagaimana? tertarik untuk menjadikan blog Anda mobile-ready? ikuti langkah-langkah berikut.
  1. Daftar Mobify
  2. Masukan alamat blog Anda ke form ‘Create a new mobile view’ dan ‘Click here to begin!’
  3. Selanjutnya Anda akan diberikan panduan dan masuk ke halaman ‘Choose’, ada tiga tahapan, yaitu 'Choose', 'Design' dan 'Manage' seperti gambar dibawah ini.
    image
  4. 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. Saya hanya memilih judul postingan dan label pada halaman utama (saya sengaja tidak memilih header, kenapa? akan dibahas pada langkah selanjutnya). mobify 2
                               (klik untuk memperbesar gambar)
  5. Setelah selesai memilih pada halaman ‘Choose’, klik Design untuk masuk ke langkah selanjutnya. (klik untuk memperbesar gambar)mobify 3Halaman ‘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)mob
    • 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.
  6. Sampai di sini pengeditan halaman utama tampilan mobile Anda telah selesai. Selanjutnya klik ’Manage’, lalu perhatikan bagian MOBIFIED TEMPLATES dan SUGGESTED TEMPLATES.mobify 4Pada bagian SUGGESTED TEMPLATED, Anda dapat melihat path mana saja yang belum diedit (seperti path untuk halaman postingan dan arsip). Langkah selanjutnya sama dengan langkah untuk mengedit atau mendisain halaman utama.mobify 5Untuk header pada halaman postingan ini saya menambahkan kata …Kita Berpijak sebagai tautan (link) yang mengarah pada halaman utama dengan menambahkan kode sederhana berikut pada New Block 
<center><div id=”masthead”><a href=”http://berandabumi.mobify.me”> . . Kita Berpijak</a></center>
       
         Dan inilah halaman postingan dan arsip blog ini.       berandabumi 2 mobify 6  
7. Bila semua dirasa cukup (pengeditan selesai), langkah terakhir adalah 
    mengaktifkan versi mobile dari blog Anda. Klik live (atau klik DEPLOY)
mobify gg     Kemudian Anda akan dibawa ke halaman ini

mobify 81

Di halaman tersebut (Deploy) Anda dapat menentukan alamat untuk blog versi mobile Anda, misalnya berandabumi.mobify.me. Lebih lanjut, Anda dapat menggunakan custom domain sebagai alternatif.

Selanjutnya copas (copy paste) kode yang tersedia sebelum kode </head>

Lalu simpan template Anda. dan Selesai :)

Nah, sekarang blog Anda telah mobile-ready. Untuk mengetes versi mobile blog Anda, gunakan Opera Mini Simulator atau Opera Mobile for Windows, atau langsung menggunakan browser di ponsel Anda (saya sarankan menggunakan Opera Mini).



47 komentar:

  1. Dengan moby berarti blogging semakin mudah dan sangat mobile, bisa ke mana-mana. kalau saya memakai opera mini saat blogging di HP.

    Salam ukhuwah

    BalasHapus
  2. Ooo... saya pikir itu semacam browser, ternyata justru untuk memudahkan pengguna ponsel yang mengakses blog kita.

    BalasHapus
  3. Info baru nih, kapan-kapan boleh dicoba :D

    BalasHapus
  4. @Beda: iya sob, mobify bisa mengubah blogmu menjadi sangat ringan bila diakses via ponsel :)


    @Erdien: selamat mencoba sob :)


    Secangkir Teh: maka dari itu, pengguna ponsel bisa lebih berhemat bila blog kita mobile-ready :D

    BalasHapus
  5. Wah info yang menarik...
    Terimakasih atas sharenya
    sukses selalu

    BalasHapus
  6. kemaren saya nyoba mofuse,tapi gak bisa redirect ke versi mobile kalo pake handphone...
    kalo pake ini beneran bisa ya??coba dulu ya...thnx infonya...

    BalasHapus
  7. @Lulus Sutopo: terima kasih juga sob :)


    @GigiSehatBadanSehat: versi mobile ini berfungsi baik via Opera Mini sob, silakan dicoba, terima kasih juga :)

    BalasHapus
  8. info yang menarik sob,, tapi blog ku udah pake mippin..
    ntar kalo banyak2 jadi bingung..

    BalasHapus
  9. Wah kalau aku buatnya di mofuse.mobi. disitu keren tapi ini jg ga kalah keren :)

    BalasHapus
  10. Saya juga sekarang seneng banget ngeblog pake hp, yang pastinya setelah aku dapat beli hp yg mendukung internet.

    BalasHapus
  11. Informasionya cukup lengkap ya...

    BalasHapus
  12. bagus aku juga sudah coba...tapi aku pakai yang mippin

    BalasHapus
  13. bagus aku juga sudah coba...tapi aku pakai yang mippin

    BalasHapus
  14. @Book Online, Konek, Elang Laut: saya membahas mobify karena bisa langsung redirect sob, suatu fitur yang tak didukung layanan lain (untuk platfrorm blogger), setidaknya sampai tulisan ini dibuat :D


    @Tinta Besi: mofuse keren sob, tapi untuk blogger belum ada fitur redirect, jadi saya lebih memilih mobify :D


    @FAISAL HILMI: memang sekarang semua serba mobile sob :D


    @remajaberperan: tulisan di atas belum mencakup semua, silakan langsung ke TKP sob :D

    BalasHapus
  15. sip..ntr saya coba d blog saya sndiri..

    BalasHapus
  16. tp dihitung ga page wiew blog kita?

    BalasHapus
  17. @Utari: selamat mencoba :)


    @hery: mobify bersifat redirect, jadi yang dihitung hanya entry page saja :D. Semua kembali ke empunya blog, mau kejar page view, atau memberi kemudahan pada pengunjung :))

    BalasHapus
  18. Kok bbrp hr ini script redirect ny ga jalan y mas??...biasany bs kok...
    Blog mas ini jg ga jaln redirect nya uy,kirain cuma sy sndiri..
    Knapa y??

    BalasHapus
  19. Kok bbrp hr ini script redirect ny ga jalan y mas??...biasany bs kok...
    Blog mas ini jg ga jaln redirect nya uy,kirain cuma sy sndiri..
    Knapa y??

    gigisehatbadansehat.blogspot.com

    BalasHapus
  20. Anda pake browser apa? fitur redirectnya lancar di Opera Mini. Tapi bila Anda klik Full site, redirectnya memang jadi ga jalan. Agar aktif lagi, masuk ke setting OpMin, lalu clear cookies. Lalu coba lagi (komentar ini diposting dari ponsel)

    BalasHapus
  21. nice tips, izin nyoba gan!!! :o

    BalasHapus
  22. wah baru tahu nih bos.....

    mantap infonya...

    salam dari seberang....

    BalasHapus
  23. Ada situs yang cukup mudah untuk digunakan bagi kita blogger blogspot untuk membuat blog versi mobile melalui hp dan bisa langsung redirect, full fitur dan tentunya gratis .ini merupakan alternatif selain MOBIFY. Silakan cek di disini

    BalasHapus
  24. Mohanlink, baburinix!
    selamat mencoba
    :D


    Januardi
    wow, saya sudah ke TKP, keren, bisa jadi perkembangannya nanti didukung oleh blogger secara resmi :)

    BalasHapus
  25. Wah..ni tampilan mobify y brubah lgi ya dr kmaren..he.he..o ya..sy telat mw ucpin trimaksh kpd mas yg sdh posting topik Mobify sblumnya, and sdkt stimulus / ransangan dri blog ini ketika lht link " komentar klik disini",..sy tertarik utk menampilkan link komentar di mobify,..tpi rbet bngt kn jk hrus psang link coment pop up di stip postingan mobify..karena stip postingan mmiliki post ID yg brbeda, and akhir y , timbul ide sperti yg sy tls di postingan blog sy. He..he..intinya blog ini cukup menginspirasi sy. Tapi..ngomong2 cra mas psang link komentar pop up tu..gmana ? Apa pki pasang link satu persatu..atw ada cra yg berbeda?

    BalasHapus
  26. A Mobile Blogger
    Bener sob, beberapa waktu yang lalu saya otak-atik, tapi ga jauh beda sama sebelumnya. Untuk link komentar saya pilih langsung dari halaman "choose", yaitu link yang berada di atas kotak komentar blog ini (Kotak komentar klasik? klik di sini), jadi ga perlu repot masang satu-persatu.

    Oke, sama-sama sob, :)

    BalasHapus
  27. bagus sih. Tp pageview blog kita brkurang gak ya? Trus apa pgunjung yg online tetep masuk hitungan widget online whos among us?

    BalasHapus
  28. KANG uchiha
    bisa dikatakan berkurang, (sekali lagi) karena versi mobile dari Mobify ini bersifat redirect. Namun bisa jadi pembaca yang penasaran dengan blog kita akan kembali ke blog kita saat browsing menggunakan PC, yang berpotensi menambah pageview blog kita.

    Untuk whos among us tergantung penempatannya, bila ditempatkan sebelum script redirect, kemungkinan masih bisa bekerja
    :)

    BalasHapus
  29. mas, kok di mennu choose kan kita disuruh milih bagian dari blog kita untuk kita masukkan didalam mobile viewnya, tapi punya saya gag ada,, malah kosong, cuma ada backgroundnya aja... gimana ya mas cara mengatasinya...

    BalasHapus
  30. MAs, mau diajarin dong cara bikin jarak di mobify?
    Coz punyaku jelek banget tampilannya, dempet2 gt...
    Sama cara munculin logo header gmn ya?
    Tolong ya... Thanks

    BalasHapus
  31. Yogi Prasetiya
    blogmu yang mana sob? soalnya saya lihat di profilmu ada tiga. Kemungkinan masalah javascript, soalnya mobify tidak bisa membaca javascript di bagian choose

    Dirk Antonio Wangke
    caranya sama sob dengan cara memberi jarak pada blog. Misalnya dengan menggunakan <br/>. atau dapat juga menggunakan margin & padding pada bagian css. Untuk header (mungkin yang Anda maksud gambar header?), silakan buat new block, lalu isi dengan kode dan link gambar header Anda, untuk mengatur letaknya, silakan atur pada bagian css

    BalasHapus
  32. mantab gan, lengkap banget tutorialnya. Tapi jujur saya kurang suka yang redirect.
    lam kenal aja yah ;)

    BalasHapus
  33. Wah, ini mantap sekali, makasih ya dah sharing...

    BalasHapus
  34. Saya juga sudah mencoba,tapi belum di cek heri-topan.mobify.me makasih infonya sob...:)

    BalasHapus
  35. Untuk posting ke blogger via friendly mobile site bisa mencoba Mobile Blogger : http://gdata.6te.net/blog

    Sederhana memang, hanya mengaplikasikan Blogger API untuk list, create post dan delete sajah.

    BalasHapus
  36. azzasite.com
    Silakan dicoba sob
    :)

    hans ganteng
    Kode redirectnya ga harus dipasang sob
    :D

    Soe86
    sama-sama sob
    :)

    Heri Topan
    Belum ada isinya sob? hehe

    baabullah
    Mantab sob aplikasinya, bisa menjadi fasilitas wajib bagi para blogger mobile
    :)

    BalasHapus
  37. jadi ini otomatis meredirect k versi mobile bila dibuka di hape ya??
    Bisa dipasangin iklan gak mas??

    BalasHapus
  38. ini yg aq cari...thanks gan inponya....

    BalasHapus
  39. Mas, saya pendatang baru di internet/blog dan saya ga ngerti apa itu ccs html dll. Kalau boleh saya pesan blog mobil sesuai propesi saya kerja di bengkel bisa ngga, kalau bisa berapa harganya. Tolong balas ke alamat email saya " dodi.Hartadi0@gmail.Com " trimakasih

    BalasHapus
  40. mansuka
    Kurang lebih begitu Mas, Mobify bisa dipasangi iklan, misalnya Adsense dan admob

    yudhis
    Sama-sama gan

    Dodihartadi
    silakan cek email Mas

    BalasHapus
  41. taks banget nich brow, sangat bermanfaat

    BalasHapus
  42. matur nuwon kang.. dah saya praktekin..
    hehehhe

    BalasHapus
  43. Klo Gini Caranya Enak Nih Buat Kontrol Komentar Lewat Hp

    BalasHapus
  44. makasih gan saya mo coba..heee

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑