Google Search Style Box jquery

Pasti tidak asing dengan tampilan search berikut ini, yap benar search ini adalah tampilan baru dari search Google yang dikembangkan baru-baru ini oleh Developer Google. Sekarang sobat bisa mempunyai search Google ini diblog sobat, jenis daripada kode yang digunakan dari search ini adalah paduan css dengan jQuery, memang dengan adanya jQuery dan diduet dengn css akan menghasilkan tampilan apapun akan menjadikan rapi dan indah, berikut SSnya

Tampilan yang ada di Google

Tampilan yang ada di Blog

---

CARA MEMBUAT GOOGLE SEARCH STYLE BOX

---

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Letakkan kode dibawah ini diatas kode langkah 4

/*Start Css For Google Style Search Box*/<br /> <br /> /* div container containing the form */<br /> #searchContainer {<br /> margin:20px;<br /> }<br /> <br /> /* Style the search input field. */<br /> #field {<br /> float:left;<br /> width:200px;<br /> height:27px;<br /> line-height:27px;<br /> text-indent:10px;<br /> font-family:arial, sans-serif;<br /> font-size:1em;<br /> color:#333;<br /> background: #fff;<br /> border:solid 1px #d9d9d9;<br /> border-top:solid 1px #c0c0c0;<br /> border-right:none;<br /> }<br /> <br /> /* Style the "X" text button next to the search input field */<br /> #delete {<br /> float:left;<br /> width:16px;<br /> height:29px;<br /> line-height:27px;<br /> margin-right:15px;<br /> padding:0 10px 0 10px;<br /> font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;<br /> font-size:22px;<br /> background: #fff;<br /> border:solid 1px #d9d9d9;<br /> border-top:solid 1px #c0c0c0;<br /> border-left:none;<br /> }<br /> /* Set default state of "X" and hide it */<br /> #delete #x {<br /> color:#A1B9ED;<br /> cursor:pointer;<br /> display:none;<br /> }<br /> /* Set the hover state of "X" */<br /> #delete #x:hover {<br /> color:#36c;<br /> }<br /> /* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */<br /> #submit {<br /> cursor:pointer;<br /> width:70px;<br /> height: 31px;<br /> line-height:0;<br /> font-size:0;<br /> text-indent:-999px;<br /> color: transparent;<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibylNPbKnKpWHL5OlyCUMEX6vo3MjhP6qaNmsCCBlFiT9XjtaVr1RkRflzvKrIRXhtH-GcgkLRUDvyoPhrtCVrLkrLSM9pwQWRKZor-o0KA-ni9phBMoxXWdWJn5O6uaFbf-tL6sr1MKGL/s1600/ico-search.png) no-repeat #4d90fe center;<br /> border: 1px solid #3079ED;<br /> -moz-border-radius: 2px;<br /> -webkit-border-radius: 2px;<br /> }<br /> /* Style the search button hover state */<br /> #submit:hover {<br /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibylNPbKnKpWHL5OlyCUMEX6vo3MjhP6qaNmsCCBlFiT9XjtaVr1RkRflzvKrIRXhtH-GcgkLRUDvyoPhrtCVrLkrLSM9pwQWRKZor-o0KA-ni9phBMoxXWdWJn5O6uaFbf-tL6sr1MKGL/s1600/ico-search.png) no-repeat center #357AE8;<br /> border: 1px solid #2F5BB7;<br /> }<br /> /* Clear floats */<br /> .fclear {clear:both}<br /> <br /> /*End Google Style Search Bar - Info @ http://koderator.blogspot.com*/

Langkah 6
Kemudian cari kode dibawah ini:
</head>
Letakkan kode jQuery dibawah ini diatas kode langkah </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/> <script type='text/javascript'> $().ready(function() { // if text input field value is not empty show the "X" button $("#field").keyup(function() { $("#x").fadeIn(); if ($.trim($("#field").val()) == "") { $("#x").fadeOut(); } }); // on click of "X", delete input field value and hide "X" $("#x").click(function() { $("#field").val(""); $(this).hide(); }); }); </script>

Langkah 8
Lalu simpan
Langkah 9
Kembali ke Page Elements > Add A Gadget > Pilih Html/Javascript.
Langkah 10
Pastekan kode dibawah ini didalam Html/javascript

<div id="searchContainer"><form name="SUYB" action="/search" method="get"><input type="text" id="field" id="s" name="q"/><br /> <div id="delete"><span id="x">x</span></div><input type="submit" name="submit" id="submit" value="Search" /><br /> </form></div>

Langkah 11
Simpan, dan lihat hasilnya

---

KETERANGAN

---

1. Jika ingin mengubah lebar kolom search cari kode ini pada langkah 5 . width:200px;  kemudian ganti angka 200 seukuran lebar sidebar/sepantasnya template sobat 

Semoga bermanfaat, Selamat mencoba