Google Search Bar For Blogger

Home / Blog / Widget / Google Search Bar For Blogger

Google Search Bar For Blogger

By : Waff

Google dengan design barunya yang tampil lebih elegan dan sempurna memang patut diacungi jempol, dengan ciri khasnya yang simple dan unik itulah yang patut ditiru para Bloggers Indonesia lantas apa salahnya mencoba-coba mengcoding sesuatu yang mirip dengan desainnya si google ini.

Yap, pada kali ini MWcrew akan mencoba memberikan sedikit ILmu kepada kalian semua dengan Membuat Tombol Search seperti Google.

Tempatkan kode CSS berikut tepat diatas ]]></b:skin>

CSS

/*Start Css For Google Style Search Box*/

/* div container containing the form */
#searchContainer {
margin:20px;
}

/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2TS7_XguB6c7_JGbuWViTm582NSLtAm0RsSsloEpPdq-Y3BFfpL_gg6Y90ymzOm88Q7nMaAVTNZJj-3pg8ZzqUV4PnnFxaou12KbPO70PRp14GXPApOk71o0RFk7eHp4uHTRJ3F9LVaB_/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2TS7_XguB6c7_JGbuWViTm582NSLtAm0RsSsloEpPdq-Y3BFfpL_gg6Y90ymzOm88Q7nMaAVTNZJj-3pg8ZzqUV4PnnFxaou12KbPO70PRp14GXPApOk71o0RFk7eHp4uHTRJ3F9LVaB_/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

/*End Google Style Search Bar*/

Untuk mengganti lebarnya ganti kode yang berlatar kuning sesuai ukuran yang di inginkan

Setelah itu cari kode </head> dan taruh kode ini tepat diatasnya.

Javascript

<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 &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

Letakkan HTML dibawah ini dimanapun yang anda suka

HTML

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