Membuat search box di blogger deteksi versi mobile atau seluler

Diposkan: 21 April, 2013
Cara membuat search engine di blogger deteksi  versi mobile/seluler di tampilan komputer. Lama tidak pernah posting artikel di karenakan kesibukan di luar di dunia maya. Kesempatan kali ini blog Copygocopy ingin berbagi sedikit trik yaitu mengarahkan hasil penelusuran melalui kotak form search (kotak pencarian)yang apabila kita memasang di blogger fitur seluler, bukan Gatget dasar search box yang disediakan blogger, melainkan kita membuat ciding sendiri dan hasil pencariannya masuk ke halaman versi seluler/mobile, Apabila blog di buka melalui perangkat komputer, notebook, PC atau pun netbook. 

Tetapi tidak dengan cara memasangnya baik custom mobile atau pun web,  di karenakan kita lagi krisis ide menulis artikel dan mungkin kedepannya blog ini akan memposting  artikel di luar tutorial blogger, Kita juga bingung memberi judul dalam artikel ini yang tepat itu apa. Berikut gambar yang kita maksud :


Gambar tersebut diambil Screnshot melalui komputer dengan browser Google chrome, yaitu hasil pencarian melalui form search engine yang kita pasang di versi mobile. Atau bisa di katakan form search versi mobile hasil pencariannya otomatis versi mobile pula, apabila kita melakukan pencarian query melalui form search engine versi mobile apabila membuka melalui komputer, notebook, PC atau pun netbook, bukan mengarah ke HTML dan kita juga bisa membatasi hasil penelusurannya. Berikut di bawah ini adalah standart code form search saederhana.


<form action="http://Url/search" id="searchthis" method="get" style="display:inline;">
<input id="b-query" maxlength="220" name="q" size="20" type="text" />
<input id="b-searchbtn" type="submit" value="Search" />
</form>

Code diatas apabila di pasang di custom versi mobile blogger, maka hasil pencarian akan mengarah ke HTML bila melalui notebook, PC, atau komputer dan tidak ada pembatasan hasil yang di index. Bukan versi mobile ?m=1. Bagaimana supaya form search engine supaya otomatis mengindex versi seluler/mobile bila membuka lewat kompute  atau PC, berikut code perubahan form di atas menjadi.


<form action="http://Url/search" id="searchthis" method="get" style="display:inline;">
<input id="b-query" maxlength="220" name="q" size="20" type="text" />
<input id="b-searchbtn" type="submit" value="Search" />
<input name="max-results" type="hidden" value="3" />
<input name="m" type="hidden" value="1" />
</form>
Keterangan :
  • Penambahan code <input name="max-results" type="hidden" value="3" /> adalah untuk membatasi berapa jumlah hasil yang ingin di tampilkan, dan silahkan ubah nilai valuenya sesuai selera.
  • Code <input name="m" type="hidden" value="1" /> adalah mengarahkan hasil pencariannya di versi mobile/seluler, dan penempatannya di akhir sebelum Tag Form.
  • (size="20" ) adalah panjang kotak/lebar bisa di ubah sesuai selera.
  • (value="Search" ) adalah tombol bottom bisa di ubah sesuai selera.
  • Ganti (Url) dengan Url Blog anda.
  • Form di atas tepatnya adalah di pasang di fitur custom seluler blogger.
DEMO, Search engine hasil pencarian index versi Mobile atau Seluler.


DEMO, Search engine hasil pencarian index versi Web atau HTML.


  • Jika ingin selalu hasil pencariannya di versi web, baik melalui komputer ataupun perangkat seluler maka silahkan ubah Code <input name="m" type="hidden" value="1" /> menjadi <input name="m" type="hidden" value="0" />.
Mudahan ada guna artikel ini.

5 komentar

  1. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  2. Thanks tutorialnya mas. http://www.kalautau.com

    BalasHapus
  3. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  4. apa perbedaan kotak pencarian yang sudah ada ketika blog di buat pertama kali dengan kode script ini....

    BalasHapus