Membuat search engine tercanggih dengan css3

Emm baru update trik lagi nih dan kali ini saya akan membahas mengenai Cara membuat kotak pencarian tercanggih dengan css3. mungkin anda semua bingung kok tercanggih. . ? ok jadi gini, kotak pencarian yang akan kita buat kali ini agak beda dengan yang lain, kenapa. . .? karena setiap kita mengetikan keyword maka kita akan langsung di arahkan ke Google.com dimana artikel kita sudah di siapkan disana. pasti pada bingung ya ok deh coba lihat demonya dan ketikan keyword disana.

DEMO

Nah kalau sudah liat dan praktek langsung kan jadi ngerti apa maksud saya.
Emmm itu juga menurut saya bagus lo karena orang bakal ngeklik postingan kita dari Google dan itu sangat baik bagi pertumbuhan blog kita hahahaa kayak bayi aja.

Ok mari kita langsung ke tempat praktek dimana. . ? ya di dasbor blogger, silahkan anda masuk di dasbor blogger lalu :

1. Klik Tata Letak / Rancangan
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode di bawah ini

<style type="text/css">
form.system_search {
    background-color: #8CC;
    padding: 5px;
    width: 300px;
    margin: 5px auto;
    -moz-box-shadow: 0 0 5px #333;
    -webkit-box-shadow: 0 0 5px #333;
    box-shadow: 0 0 5px #333;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
    }

form.system_search input[type="text"] {
    background-color: #DDD;
    border: 1px solid #38F;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 0 0 5px #999;
    -webkit-box-shadow: 0 0 5px #999;
    box-shadow: 0 0 5px #999;
    color: blue;
    width: 250px;
    margin: 0;
    height: 30px
    }

form.system_search input[type="submit"] {
    background: #449EB5;
    background: -moz-linear-gradient(top, rgba(68, 158, 181, 1) 0%, rgba(125, 185, 232, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(68, 158, 181, 1)), color-stop(100%,rgba(125, 185, 232, 1)));
    background: -webkit-linear-gradient(top, rgba(68, 158, 181, 1) 0%,rgba(125, 185, 232, 1) 100%);
    background: -o-linear-gradient(top, rgba(68, 158, 181, 1) 0%,rgba(125, 185, 232, 1) 100%);
    background: -ms-linear-gradient(top, rgba(68, 158, 181, 1) 0%,rgba(125, 185, 232, 1) 100%);
    background: linear-gradient(top, rgba(68, 158, 181, 1) 0%,rgba(125, 185, 232, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#449eb5', endColorstr='#7db9e8',GradientType=0 );
    border: 1px solid #333;
    margin-left: 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    height: 30px
    }
</style>
<form class="system_search" style="font-size:11px;" method="get" name="searchform" action="http://www.google.com/search" target="_blank"><input type="hidden" name="sitesearch" value="http://zhinto.blogspot.com/"><input onfocus="searchfield_focus(this)" type="text" name="as_q" size="20" placeholder="Cari Artikel"><input type="submit" value="Cari" title="Cari artikel">
</form>​

5. Klik SIMPAN

Sebelum anda simpan silahkan ganti kode http://zhinto.blogspot.com/ dengan URL blog anda dan setelah itu klik SIMPAN. dan lihat hasilnya. semoga bermanfaat. jika ada yang kurang silahkan kreasikan sendiri. :)