membuat search form blogspot mobile

cara menampilkan kotak pencarian artikel di blogspot mobile - Search form merupakan widget penting dalam sebuah blog, banyak sekali blogger menganggap kotak search adalah hal sepele padahal ini sifatnya mewakili segala tulisan kita yang ada di blog, mempermudah pengunjung mencari kata kunci walaupun hanya satu kata, khususnya tampilan mobile yang memang tampilannya serba minim maka
kita pengelola harus pintar-pintar mengelolanya, tambahkan widget-widget yang memang akan mewakili artikel kita.

Seperti gambar diatas kotak pencarian pada blog ini saya tempatkan di bawah jelasnya diatas footer, berikut pemasangannya :

1. Dashboard > template ( buat siaga silahkan cadangkan template ) > edit html > cari kode ]]></b:skin> ( gunakan ctrl+F biar cepat ) > lalu masukkan css ini tepat diatasnya

/* css mobile search start */ .mobsearch{text-align:left; padding:8px 8px 8px 8px; display: block; margin: 20px 10px 10px;} .mobile .mobsearch #b-query { margin:0; color: #444; background: #EEEEEE; border: 1px solid #777; width: 60% !important; } .mobile .mobsearch #b-searchbtn { color: #FFF; background: #0E94B2; border: 1px solid #a7a7a7; width: 30% !important; } /* css mobile search stop */

2. Lalu cari kode

default='false' name='includeBottom'/>
</macro:include>

Jika ada yang mirip gunakan yang terakhir ( paling bawah ) masukan kode berikut :

<!-- mobile search form --> <b:if cond='data:blog.isMobile'> <div class='mobsearch'> <form action='http://mywapmaster.blogspot.com/search' id='searchthis' method='get' style='display:inline;'> <input id='b-query' maxlength='210' name='q' size='20' type='text'/> <input id='b-searchbtn' type='submit' value='Search'/> <input name='max-results' type='hidden' value='20'/> <input name='m' type='hidden' value='1'/> </form> </div> </b:if> <!-- mobile search form end -->

3. Simpan

Keterangan :

1. Ganti url mywapmaster.blogspot.com dengan link blog anda
2. maxlength='210' Panjang form
3. size='20' Lebar form
4. value='20' jumlah pencarian
5. Untuk mengubah warna dapat menggunakan css pada point no. 1

Note : Cara ini hanya berlaku jika anda mengaktifkan fitur template mobile KHUSUS