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
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:
thank, infonya sangat bermanfaat..
@Angga Creativity
iya, sob sama2,, makasih juga dah mampir.. :D
tipsnya mantap gan. salam blogger www.fadlieha.co.cc
@fadlieha
mkasih gan, salam blogger :D
semoga sukses
pasang background nya kok sulit sob,,,,,
ijin nyimak sob
mas aku udah coba tapi jelek :-(
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