Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Monday, November 1, 2010

Membuat Blog Menjadi Mobile Friendy

Dengan kehadiran handphone-handphone yang lebih banyak difokuskan pada fitur chat dan browsing, Sekarang hampir semua orang udah bisa mengakses internet dengan mudah. Kapanpun dan dimanapun itu. Ya, cukup mengeluarkan dana sebesar 300ribu aja, HP berfitur aplikasi chatting dan browsing udah menjadi milik kita.

Mengakses internet dengan HP pun udah menjadi pilihan banyak orang, karena ringan dan mudah dibawa kemana-mana. Hal ini tentu saja ngga boleh luput dari perhatian kita, para blogger. Kita harus membuat blog kita menjadi "Mobile Friendly" alias "ringan dan sederhana".

Kepuasan para pengunjung yang datang dari browser HP juga perlu kita perhatikan. Tampilan blog yang terlihat bagus pada kompi, belum tentu terlihat sama pada HP. Design yang "Wuah" pada layar kompi, bisa menjadi "Wuekz" pada layar HP.

web-mobile-friendly

Bagaimana caranya membuat blog kita menjadi Mobile Friendly ?

Perbedaan yang paling mencolok antara kebutuhan pengunjung yang menggunakan HP dan Detskop adalah masalah Tampilan dan Size. Semakin kecil ukuran sebuah situs, semakin mudah dan murah juga untuk diakses melalui HP. Karena itu, hal terpenting yang harus kita lakukan adalah memperkecil ukuran blog kita.

Coba deh lihat situs-situs besar semacam Facebook dan Twitter. Situs mereka ketika di akses melalui HP dibuat berbeda dengan tampilan untuk browser kompi. Tampilan untuk web jauh lebih sederhana dan ringan. Hal ini tentu saja membuat biaya pemakaian pulsa juga berkurang bagi pengguna handphone.

Melihat data-data diatas, kita bisa menyimpulkan bahwa blog yang Mobile Friendly tentunya harus mengutamakan keringanan dan konten post diatas segala-galanya. Widget-widget bisa kita kesampingkan, karna pengunjung lebih berfokus kepada dua hal tersebut.

Pointnya udah kita dapat. Sekarang kita bisa mengunakan bantuan Google Reader untuk memimalis tampilan blog kita, sehingga menjadi Mobile Friendly.

Google Reader mempunyai kemampuan untuk menghasilkan tampilan versi mobile dari RSS Feed web kita dengan begitu mengagumkan. Yang kita perlukan hanyalah alamat RSS Feed dari situs kita untuk membuat halaman mobile website.

Cukup dengan memasukkan alamat url feed blog kita seperti contoh dibawah ini, maka blog kita udah bisa tampil dalam versi Mobile :

http://www.google.com/reader/m/view/feed/[url_feed_anda]

Teks berwarna merah adalah alamat feed blog kita.

Untuk format penulisannya, kita akan pakai contoh alamat feed blog ini.

http://www.google.com/reader/m/view/feed/http://anggaleoputra.blogspot.com/feeds/posts/default

Sampai tahap ini, blog kita sudah 100% Mobile Friendly. Dan yang perlu kita lakukan selanjutnya adalah membuat blog kita bisa mendetect jenis browser yang digunakan oleh pengunjung secara otomatis. Apabila pengunjung datang dari browser HP, maka mereka akan di alihkan ke alamat blog kita via google reader. Sedangkan pengunjung yang datang dari browser detskop, akan tetap menuju blog utama kita.

Caranya?

1. Login ke Account / Dashboard blogger.

2. Masuk ke menu Rancangan / Design, kemudian pilih Edit HTML.

3. Letakkan kode dibawah ini sebelum kode <head>

<script type='text/javascript'>
(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|p(ixi|re)\/|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,&#39;http://www.google.com/reader/m/view/feed/http://anggaleoputra.blogspot.com/feeds/posts/default&#39;);
</script>

4. Ganti teks berwarna merah pada kode diatas dengan alamat url feed blog kalian yang sudah di gabungkan dengan URL Google Reader.

5. Simpan, dan coba akses blog kalian dari HP, atau bisa juga melalui Opera Mini Simulator.

Untuk simulator detskop Opera Mini versi 4.2 , kunjungi http://www.opera.com/mobile/demo/?ver=4
Untuk simulator versi terbaru (versi 5) , kunjungi http://www.opera.com/mobile/demo/

Apa sudah berjalan?

Kalo udah, sekarang saatnya cari ilmu lain lagi.. hehe..

See u..

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

5 comments:

ane dah lakuin smuanya plen
tapi ane blon test sih bisa apa kagak
ane dah coba pkek hp butut ane
tp loadingnya lama
ane coba pakek opera mini simulator
connection failed kesemuanya

hmm
boleh tolong di test gk yah

nih
http://merdekaprogrammer.blogspot.com/

Reyz : Udah di test..,dan hasilnya? Sempoa! hehe..
Tadi Opera Mini lagi error kali yah ?

June 11, 2011 at 3:26 PM Visitor
Anonymous said...

Juni 2011, fasilitas blogger untuk mobile view sudah ada bos

maksud nya mobile freindy gimana ? bisa untuk seo gak

ya sekarang webite moblie sangat berguna dan cerdas car konsumen

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra