Cara Mengalihkan URL Blog Ke Versi Mobile

Seperti yang kita ketahui tampilan blog dengan template versi desktop akan terlihat berantakan apabila kita membuka blog melalui browser gadget / smartphone. Hal ini juga akan membuat waktu loading yang lama dan banyak memakan bandwith hanya untuk membuka satu halaman blog, belum lagi resource gadget / smartphone yang banyak terkuras sehingga kadangkala menyebabkan gadget / smartphone pengunjung blog menjadi hang (error). Wah... peluang untuk mendapatkan pengunjung yang menggunakan browser mobile bisa hilang sob... sayangkan... padahal jumlah pengguna gadget / smartphone tiap tahunnya semakin bertambah banyak...

Template blog untuk versi mobile memang sudah terintegrasi pada sebagian template blog. Untuk mengaktifkan versi mobile kita cukup menambahkan "?m=1" pada url blog. Namun tidak semua pengunjung mengetahui cara tersebut. Selain itu blogspot belum bisa mendeteksi browser mobile yang digunakan pengunjung secara otomatis sehingga untuk mengarahkan blog ke template versi mobile kebanyakan para blogger harus membuat link khusus secara manual. Waduh... kalo masih manual udah kuno sob... Trus ada ga solusinya ??? ada sob ga perlu khawatir pada postingan kali ini saya akan berikan cara membuat pengalihan secara otomatis buat pengguna gadget / smartphone, jadi ga perlu repot-repot membuat link atau mempromosikan lagi blog kita yang versi mobile.

Trik yang saya gunakan untuk menampilkan blog versi mobile secara otomatis yaitu menggunakan javascript untuk pengalihan URL. Pada postingan artikel ini saya berikan 3 javascript pengalihan URL blog ke versi mobile, silakan pilih salah satu yang menurut sobat cocok untuk digunakan di blognya...

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".


• Cari kode </Head> kemudian copy-paste kode di bawah ini dan taruh di atas kode </Head>. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.


• Script Pengalihan Berdasarkan Ukuran Layar.

  <script type="text/javascript">
  <!--
  if (screen.width &lt;= 600) {
  document.location = document.location.href+"?m=1";
  }
  //-->
  </script>



• Script Pengalihan untuk iPhone / iPods / iPads.

  <script language=javascript>
  <!--
  if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
     location.replace(document.location.href+"?m=1");
  }
  -->
  </script>



• Script Pengalihan untuk Beberapa Tipe Mobile.

  <script type='text/javascript'>
  // <![CDATA[  
  var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
  if (mobile) {  
  document.location = document.location.href+"?m=1";  
  }  
  // ]]>
  </script>



• KETERANGAN :
  • Kode yang berwarna biru merupakan URL Link Pengalihan. Pada settingan script diatas URL pengalihan sudah di set agar link secara otomatis akan mengalihkan halaman blog ke versi mobile apabila pengunjung membuka blog menggunakan browser mobile.
  • Gunakan browser Internet Explorer untuk mengecek pengalihan URL Blog dengan mengcopy-paste script di bawah ini dan taruh di atas </Head>. Jika sudah selesai silakan di hapus script pengecekan ini. Guna pengecekan adalah untuk mengetahui apakah url link pengalihan sudah sesuai dengan tujuan URL yang diinginkan. Kode script "document.location.href" adalah URL yang sedang ditampilkan di kotak alamat browser, sedangkan "?m=1" adalah alamat URL blogspot untuk versi mobile. Jika menginginkan URL tujuan yang lebih spesifik tinggal merubah [document.location = document.location.href+"?m=1";] menjadi [document.location = "http://url-tujuan.html";].
    
    
    <script language='JavaScript'>
    var browserName=navigator.appName;
    if (browserName==&quot;Microsoft Internet Explorer&quot;)
    {
    document.location = document.location.href+"?m=1";
    }
    </script> 
  
  
  • Preview untuk melihat hasil script pengalihan dengan simulator mobile online silakan kunjungi http://www.opera.com/developer/tools/mini/. Supaya bisa menggunakan simulator mobile online silakan download dan pasang dulu Java Platform kemudian restart firefox setelah itu tunggu bebearapa saat sampai simulator mobile online terlihat.
    
    
    
  
  
  • Preview langsung menggunakan gadget / smartphone dengan cara mengunjungi blog melalui browser gadget / smartphone.


• Klik "Save" dan lihat hasilnya...

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.