Cara Membuat Kotak Pencarian / Search di Blogger

Hallo, ketemu lagi nih dengan saya di Blog BibipBoy. Pada kesempatan kali ini kita akan membahasa mengenai Cara Membuat Kotak Pencarian / Search di Blogger.

Apakah kalian sudah mengganti tema blogger kalian? Jika kalian sudah menggantinya, apakah tema sudah sesuai dengan keinginan kalian? Perlu kalian ketahui, sejauh pengalaman saya di dunia blogging ada banyak template atau tema keren untuk kita pasang di blogger yang kita miliki, namun tampilan kerennya tersebut masih belum bisa menopang kebutuhan para pengunjung blog kita, seperti tidak ada Kotak Pencarian/Search.

Pada artikel kali ini, saya akan sedikit menjelaskan bagaimana cara membuat kotak pencarain (search box) keren untuk blogger. Untuk lebih jelasnya silahkan kalian pahami penjelasan dibawah ini :

Langkah - Langkah Membuat Search Box Keren Blogger

    Pembuatan Search Box Via Html/ Javascript

1. Pertama silahkan kalian buka akun blogger kalian, kemudian masuk pada menu Tata Letak atau Layout .
2. Pada halaman tata letak tersebut silahkan kalian klik menu tambahkan gadget dan pilih HTML/Javascript .
3. Setelah itu kalian akan melihat tampilan kota html/javascript, silahkan kalian masukan kode tersebut pada kotak html/javascript kemudian kalian tekan tombol Simpan untuk mengakhirinya.

Masukan kode/script berikut ini :

<style>

#search-box {position: relative;width: 100%;margin: 0;}

#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;

-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}

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

#search-box input[type="text"]

{width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none;}

#search-button {position: absolute;top: 0;right: 0;height: 42px;

width: 80px;font-size: 14px;color: #fff;text-align: center;

line-height: 42px;border-width: 0;background-color:#DC143C;

-webkit-border-radius: 0px 5px 5px 0px;

-moz-border-radius: 0px 5px 5px 0px;

border-radius: 0px 5px 5px 0px;

cursor: pointer;}

</style>

<div id='search-box'>

<form action='/search' id='search-form' method='get' target='_top'>

<input id='search-text' name='q' placeholder='Cari Artikel Disini ...' type='text'/>

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

</form>

</div>

Keterangan :

1. Kode yang berwarna merah untuk mengganti warna dari tombol Seacrh, kalian bisa mencari kode warna kalian yang inginkan di http://www.dianagung.com/blog/kode-warna-css-lengkap
2. Kode berwarna biru untuk mengganti kata pada kolom pencarian, ubah sesuai keinginan kalian.

Nah sekian postingan saya kali ini mengenai Cara Membuat Kotak Pencarian di Blogger. Semoga berguna dan bermanfaat bagi kalian pembaca dan semoga berhasil dalam mencoba tutorial diatas. Terima Kasih.