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 (Misalnya, bila kita mengetik alamat http://www.berandabumi.co.cc di browser ponsel, kita akan  diarahkan ke http://berandabumi.mobify.me).

 

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)




Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑