Penulis: Moch Adnan dipublikasikan: 7 Februari 2015
Cara Membuat Kotak Pencarian Untuk Blog
Fungsi dari kotak pencarian adalah untuk memudahkan para pengunjung dalam mencari artikel tertentu dengan cara mengetikkan kata atau judul postingan kedalam kotak tersebut, lalu secara otomatis blog akan memunculkan kata atau judul tersebut kepada para pengunjung. Berbeda dengan hasil pencarian google search yang pernah saya posting sebelumnya, dimana hasil pencarian kata atau judul tersebut akan menampilkan iklan terkait juga, baca postingan saya cara membuat kotak pencarian google custom.

Cara Membuat Kotak Pencarian Untuk Blog

Kotak pencarian ini nantinya akan sangat dengan mudah anda pasang kedalam halaman blog, anda hanya cukup melakukan copy paste sambil mengikuti instruksi yang saya berikan secara seksama, maka hasil kotak pencarian pun langsung bisa dipergunakan dalam blog anda. Langsung saja, masuk kedalam 'dasbor blog' kemudian pilih 'Template' lanjutkan dengan memilih 'Edit HTML' kemudian cari kode seperti berikut ]]></b:skin> dan simpan (sisipkan) kode ccs berikut ini tepat diatas kode tadi.


#search-box{position:relative;width:206px;margin:10px auto}

#cse-search-box{height:30px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #bbb}

#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent}

#search-box input[type="text"]{width:85%;padding:5px 20px 12px 0;color:#666;outline:none}

#search-button{position:absolute;top:0;right:0;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png) no-repeat;cursor:pointer}

Selanjutnya simpan (sisipkan) kembali kode html berikut di tempat yang anda inginkan.

<div id='search-box'>

<form action='/search' id='cse-search-box' method='get'>

<input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari di sini ...'/>

<button id='search-button' type='submit'/>

</form>

</div>
Untuk cara mudahnya anda bisa menyimpannya dengan menambahkan sebuah gadget baru. Pergi ke 'Tata letak' lalu pilih 'Tambah gadget' dan pilih 'HTML'
Atau jika blog anda tidak memiliki sidebar, anda bisa menyimpannya tepat di bawah nama judul blog anda, dengan mencari kode seperti berikut dalam template blog. <b:section class='main' id='main' showaddelement='no'>

Demikian saja  Cara Membuat Kotak Pencarian Untuk Blog  selamat mencoba and happy blogging.