Blogger için ‘Google Tipi’ arama kutusu

Blogger derslerimize ara vermeden devam ediyoruz. Bu dersimizde sanıyorum ki birçok kişinin seveceği bir eklentiyi kurmuş olacağız. Bildiğiniz gibi uzun bir süre önce Google yeni tasarımına geçiş yaptı. Ve bu tasarımındaki yeniliklerine devam ediyor. Konumuza dönmek gerekir ise; bizlerde Blogger için Google tipinde bir arama kutusu yapacağız. JavaScript ile yoğurulmuş bu arama motoru; arama yazısını yazdığınız an sağ tarafta yazıyı silme butonu bulunduruyor. Böylelikle yanlış aramaları bu butona tıklayarak anında silebiliyorsunuz. Dolayısı ile fazlası ile fonksiyonel olan bu arama motoru, diğer arama motorlarına nazaran oldukça profesyonel. Kullanımı ise oldukça basit. İsterseniz hemen anlatıma geçelim..

Öncelikle aşağıdaki kodları temanızın CSS bölümüne ekleyiniz..

/*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/AVvXsEgim96XNDim9P1ROKGfhFhPNteTy0b0YJrBBIBagcN9LlVxwAUNV3u6Rq7H834rsXo6Om4L1x9N3O8C_EBf_AE8glUPmHTqTnz38FlXjHDT0lKV9Las-Xwtc1A84O6OjfexWo_olbyrZ-B0/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/AVvXsEgim96XNDim9P1ROKGfhFhPNteTy0b0YJrBBIBagcN9LlVxwAUNV3u6Rq7H834rsXo6Om4L1x9N3O8C_EBf_AE8glUPmHTqTnz38FlXjHDT0lKV9Las-Xwtc1A84O6OjfexWo_olbyrZ-B0/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}
/*End Google Style Search Bar - Info @ http://www.spiceupyourblog.com*/

Daha sonra, aşağıdaki kodu bulalım..

</head>

Ve aşağıdaki kodları, yukarıdaki koddan önce ekliyoruz..

<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>

Son olarak ise; Tasarım > Sayfa Öğeleri > Gadget Ekle bölümünden HTML/JavaScript Ekle seçeneğine tıklayarak aşağıdaki kodları ekliyoruz..

<div id="searchContainer">
<form name="SUYB" 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>