Cara Membuat Tombol Search Atau Search Button

Salam ...

Untuk kali ini saya akan coba berbagi pengalaman dari apa yang sudah saya pelajari, yaitu Cara Membuat Tombol Search Atau Search Button. Untuk blogger sendiri memang sudah menyediakan fasilitas ini. Tapi tidak ada salahnya kan kalau kita coba belajar membuatnya secara manual.

Oke, untuk langkah-langkahnya :

• Sign-in Blogger
• Pilih Rancangan
• Lalu pilih Edit HTML
• Beri tanda Centang pada Expand Widget Template. Sebelumnya jangan lupa untuk back-up template Anda.

Selanjutnya carilah kode ]]></b:skin>, copykan kode berikut tepat diatas kode ]]></b:skin>

form#searchform2{display: block;float:right;margin: 30px 14px 10px 5px;}
input.searchinput{background:#fff;border: 1px solid #006699;color:#006699;height:30px;}
.searchsubmit{background:#006699;border:1px solid#006699;color:#fff;height: 32px;}

Perhatikan kode yang tercetak tebal. Sesuaikan warna menurut kehendak Anda.
Untuk menjalankan perintah tersebut, copy kode berikut tepat berada dibawah <div id='header-wrapper'> atau <div class='header-outer'> :

<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='searchform2' method='get'>
<input class='searchinput' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' size='32' type='text' value=''/> <input class='searchsubmit' onmouseout='this.style.background=&apos;#4486D0&apos;' onmouseover='this.style.background=&apos;#2e6eb8&apos;' type='submit' value='Search'/>
</form>

Lihat hasilnya dengan klik Pratinjau, jika sudah sesuai dengan apa yang Anda harapkan Simpan Template.

Semoga bermanfaat

Baca Juga :