Membuat Search Engine Menarik dan Cantik

Selamat Bertemu Kembali. Mau cerita dulu tapi tidak punya bahan. Langsung saja ke isi tulisannya supaya tidak bosan bacanya. Oke!!!

Sebenarnya inti dari tulisan ini bukan sesuatu yang baru karena fitur ini sudah disediakan oleh pihak BLOGGER. Tapi, bagi yang ingin memiliki fitur tersebut dengan tampilan yang unik, bisa memakainya. Fitur yang saya maksudkan adalah kotak Search Engine.

Cara membuatnya seperti berikut. Untuk cara pertama ini, tinggal copy paste saja ke sidebar/widget blog Anda. Kode di bawah ini adalah kode standar. Artinya, tampilannya adalah tampilan umum (tampilan biasa saja).

Perhatikan kode berikut:

<form action="http://nama-blog.blogspot.com/search"
method="get"><input class="textinput" name="ian" size="25" type="text"/> <input value="Search" class="buttonsubmit" name="submit" type="submit" />
</form>

Kode di atas akan menghasilkan seperti ini.

Agar bervariasi, bisa menambahkannya dengan latar gambar. Lihat contohnya.

<div style="border: 4px groove green; background-image: url(https://lh3.googleusercontent.com/_QeIxO28ukBc/TZLjW_tRnmI/AAAAAAAAALY/pA6d3PspvXo/385512.jpg); width: 350px; padding:15px 15px 0 15px;">
<form action="http://nama-blog.blogspot.com/search"
method="get"><input class="textinput" name="ian" size="25" type="text"/> <input value="Search" class="buttonsubmit" name="submit" type="submit" />
</form></div>

Kode di atas akan menghasilkan kotak Search seperti di bawah.

Catatan: Tulisan berwarna kuning ganti dengan alamat blog Anda, sedangkan tulisan berwarna merah ganti dengan apa saja sesuai dengan keinginan Anda.

Untuk cara yang kedua, dengan memasukkan langsung ke dalam kode HTML blog Anda.

Caranya, yaitu:

1. Login ke akun Anda.
2. Pada halaman DASBOR, klik PENGATURAN.
3. Klik EDIT HTML.
4. Silahkan copy kode berikut ke tempat di mana Anda akan menyimpannya.

<form action='/search' class='cariform' method='get'>
<input class='carifield' id='q' name='q' onblur='if (this.value == "") {this.value = "Cari Artikel di Sini . . . .";}' onfocus='if (this.value == "Cari Artikel di Sini . . . .") {this.value = ""}' type='text' value='Cari Artikel di Sini . . . .'/>
<input class='caributton' type='submit' value='Cari' />
</form>

Langkah selanjutnya, Anda membuat kode CSS-nya biar tampilannya menarik. Letakkan kode berikut ini di atas kode ]]></b:skin>.

/*- Pencarian -*/
.cariform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.cariform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.cariform .carifield {
background: #DBDBDB url(E:/Wallpaper/Desain Ian/bukutrans.png);
padding: 7px 6px 5px 8px;
width: 240px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.cariform .caributton {
color: #000;
border: solid 1px #494949;
font-size: 14px;
font-weight: bold;
height: 28px;
width: 45px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #ccc;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Setelah itu, simpan template Anda. Selesai dan lihat hasilnya. Demikian cara membuat kotak Search Engine pada blog. Sampai bertemu kembali pada postingan berikutnya.