Tutorial Blog Membuat Search Form atau Kotak Pencarian Sederhana untuk Blogspot

Tutorial Blog Membuat Search Form atau Kotak Pencarian Sederhana untuk Blogspot dan menghubungkan link search dengan search form nya.

Terasa janggal memang kalo dalam sebuah blog tidak ada search form atau kotak pencariannya.Selain memberikan kesan profesional juga untuk melengkapi penampilan blog kita.

Saya pernah membaca artikel tentang pembuatan search form seperti ini,dan pertanyaan audiens ttg bagaiman menghubungkan search form dgn link searchnya,tidak ditanggapi dengan serius.

Nah untuk itulah Tutorial saya kali ini adalah membuat search form atau kotak pencarian yg sederhana dan bagaimana menghubungkan search form dengan link searchnya.

Saya mulai dengan membuat kode seperti ini

<form  id='searchblog' method='get'>
<input  name='q' placeholder='Cari Artikel Disini...' type='text'/>
<input id='search-button-top'  type='submit' value='Pencarian'/></form>


Setelah saya save.maka hasilnya adalah sepert ini

Jelas search form tersebut belum bisa berfungsi mencari artikel link blog.

Supaya search form tersebut berfungsi mencari artikel saya masukan deklarasi seperti ini.

<form  action='/search' id='searchblog' method='get'>

Saya save lagi dan hasilnya sudah bisa mencari artikel meski masih standard dan belum seperti yg saya inginkan.

Kemudian saya coba menambahi style pada search form itu dengan deklarasi seperti ini

 <input Style='height:38px;width:250px;margin-top:1px;margin-right:-4px;font-size:18px;font-family:Ubuntu;' name='q' placeholder='Cari Artikel Disini...' type='text'/>
<input id='search-button-top' style='font-family:Ubuntu;width:110px;height:38px;background:#955f2a;color:#fff;font-size:18px;' type='submit' value='Pencarian'/>

Maka hasilnya adalah seperti search form punya saya yg diatas itu.
Jadi lengkapnya deklarasi search form punya saya itu adalah

<form action='/search' id='searchblog' method='get'>
<input Style='height:38px;width:250px;margin-top:1px;margin-right:-4px;font-size:18px;font-family:Ubuntu;' name='q' placeholder='Cari Artikel Disini...' type='text'/>
<input id='search-button-top' style='font-family:Ubuntu;width:110px;height:38px;background:#955f2a;color:#fff;font-size:18px;' type='submit' value='Pencarian'/></form>

Nah buat soblog yg memerlukan search form sederhana seperti punya saya,silahkan di copy dan dipake...
Untuk penempatannya terserah silahkan sesuaikan tinggi dan lebar nya.

Demikian tutorial blog saya kali ini.Selamat berkreasi dan salam sukses.