Cara Membuat Gadget Pencarian atau Search Engine Dengan Mudah Dalam Blog

Sebenarnya untuk Gadget pencarian atau Search Engine di dalam blog sudah ada, akan tetapi stylenya masih default atau standar. Supaya Tampilannya lebih menarik Search Enginenya di polesi dengan warna sehingga kelihatan cantik.

Dibawah ini cara untuk membuatnya:

1. Login ke Blogger

2. Masuk ke menu Tata Letak

3. Tambah Gadget

4. Pilih +HTML/JAVASCRIPT

5. Tuliskan Script dibawah ini dengan variasi gadget pencarian

6. Dan Simpan

Dibawah ini contoh kode gadget pencarian yang lebih banyak variasinya:

Variasi 1

Kode:

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIpfeRdZza86U7xLryMDgdTpO01neWPzx07YnlOqYc6iWCXnngEiXbafHBTavdh8OlUFVo0EKxfp8ZGjMIF6sQO9WsMucG6Lv-DEH-b6-8TZGQjbVFNRVoUfWh_r0fJApFqGU0E6ugtFp/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center> 

Variasi 2

Kode: 

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHJFxenqx2hdzDjQTPehIzZjxGn5lpOr-c2LWvuSWMujwxiqEqQsmV1kHekfkW0OFxRx744pywKjQrIUcYKgMHdafOQ44NhxGPxBcMp9606oA7b4zXIDH_iZfFMDQMe5Nz_hqX4OX2r72c/s1600/lostsector-search-box-darkgrey.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Variasi 3

Kode

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRvHjlB_hJQq0lDwRMcLlSnMktlFU6ZOKld3V22J3LVFNAAEdVjdcNPIwvyLj3Qj1NxrBm45VwDgLSJKbSP46f8wf07MbXqXgsX_fWjInvBOLDQs0vr-k85KV09QBuFJoxMeP1HQj551_j/s1600/lostsector-search-box-gray.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Variasi 3

Kode:

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjwpSaeqyjpJvrQltpbeJBHw3UtsqrWfC99lj7fLgvW8STfLOD2t153Ku6QNfKJr0p4atJTYrq5qynAXcnTFc5OCHnPCyPmI2o4HP3UlQZAoOVjbgcPyvLZBWb-kkJoisYvpfmnUFg7KG/s1600/lostsector-search-box-black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Variasi 5

Kode:

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkM5NvlESYCz-GQUUKnzrQauEE9puv0hOvlo9YjbuB6s4aAn_z1MDQAq65Nu9Op7epboZk1d6NbYm8CsZpF0Dz3t4tw_ECSgsNNI1s45UepfTccVMA5-HvtSZ1TeegoJih00nJyKopEi83/s1600/lostsector-search-box-red.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>

Variasi 6

Kode:

<style type="text/css">

#a-searchbox{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCYszf7VCxq8DpezI4jy0dF83UArg3OD635kxIsrjFE2VLvxklLEa7YMJkLK6oU8uoEphjlKVRhbFlPecGTcC6VCjVp7kmur46NursspiI7s2FR9PCVjW9RjRwY4_JZuHQV6wKs9wDffP/s1600/lostsector-search-box-yellow.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#a-searchform{display: block;padding: 10px 12px;margin:0;}

form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<center>

<div id="a-searchbox">

<form id="a-searchform" action="/search" method="get">

<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />

</form>

</div></center>