Membuat Search Engine Sendiri Dengan CSS3

Contohnya bisa dilihat di atas, bukan sembarang kotak pencarian, search engine ini bergaya CSS3. Kelebihannya jika mesin pencari tersebut disorot dengan mouse, efek bayangan berwarna akan muncul. Seperti yang terlihat di atas, yang muncul adalah bayangan warna merah. Warna tiap elemen bisa kita rubah sesuai keinginan kita. Mulai dari teks, bakcground search engine dan background teks. Jika tertarik, berikut lagkah - langkahnya.

• Login ke blogger anda.
• Klik Rancangan >> Elemen Halaman kemudian Tambah Gadget
• Pilih yang add HTML/Javascript.
• Masukkan kode dibawah ini ke dalam kolom yang muncul.

<div id="search"><form action="/search" id="searchform" method="get" style="display: inline;"><input id="s" maxlength="255" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari apa bro..&quot;;}" onfocus="if (this.value == &quot;Cari apa bro..&quot;) {this.value = &quot;&quot;}" type="text" value="Cari apa bro.." /> <input class="button" id="searchsubmit" name="Click" type="submit" value="Click" /></form></div> 

Tulisan warna merah bisa diganti sesuai keinginan, tapi ingat, keduanya harus sama.
Tulisan warna biru juga bisa diganti, itu adalah tombol klik untuk search engine.

Kalo sudah, klik Simpan.
Belum selesai lho, CSS3-nya belum dimasukin. Langkah berikutnya adalah:

• Masih di menu design. Klik Rancangan >> Edit HTML.
• Beri tanda centang pada Expand Template Widget.
• Cari kode ]]></b:skin>
• Paste kode berikut ini di atas kode ]]></b:skin>

#search{background : #EEE;margin : 0 0 10px 0;padding :11px 10px;width :230px;-moz-box-shadow : 4px 4px 4px rgba(0,0,0,0.3);-webkit-box-shadow :4px 4px 4px rgba(0,0,0,0.3);-moz-border-radius:10px;-webkit-border-radius:10px;font-size: 14px;line-height: 15px;}#searchform #s{width:162px;text-shadow:2px 2px 6px yellow;color:green;font-size:17px;}#searchsubmit{cursor:pointer;}.button{border:1px solid #aaa;-moz-border-radius:4px;-webkit-border-radius:4px;padding:2px 4px;}
#search:hover{-moz-box-shadow : 4px 4px 14px blue;-webkit-box-shadow :4px 4px 14px blue;}

#EEE       Warna dasar dari Search Engine

yellow     Warna bayangan/shadow dari teks yang ada di kolom search engine

green      Warna teks yang ada di kolom Search Engine

blue        Warna bayangan dari Search Engine

Empat elemen warna di atas bisa dirubah sesuai keinginan kita. Misal gray, purple, pink, dll. Atau ingin warna yang lebih detail, bisa anda lihat kode - kode warna HTML di sini.

Masih belum selesai. Setelah di paste di atas kode ]]></b:skin>.

Berikutnya cari kode <b:include name='quickedit'/>.

Hapus kode tersebut, kemudian klik simpan template.

Nahh.. Lihat hasilnya..