Blogger Arama Kutusu

Blogger Arama Kutusu

 Resimde gördüğünüz bu CSS arama kutusunu eklemek için Blogger kumanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izledikten sonra aşağıdaki kodları yapıştırıp kaydetmeniz yeterli olacaktır.

<div id='arama'> 
<form action='/search' id='searchThis' method='get'> 
<input id='searchBox' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' size='20' type='text' value='Aranacak kelime'/>
                  <input id='searchButton' type='submit' value=''/> 
</form> 
</div> 
<style> 
#arama { 
  float:right; 
  width:258px; 
  padding-top:50px; 
padding-bottom:30px; 
padding-left:10px; 
padding-right:-0px; 
  margin:0 0 20px 0; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5lWWqBUhWXReZGnNEVlurElOfQdTmGYI2vyBPMs-QTFF8Xnm1LF7fYZtzrtEHBqYs31oHaihIZGxKOX9n4Izbq3I4xhvZfuR_3lXiaVyH_w0_99fo8GeKz1D4hQg7wDeYCmwPzeYly1K9/s271/s.png)  no-repeat 0px 0px; 
  -webkit-border-radius:5px; 
  -moz-border-radius:5px; 
  border-radius:5px 
  height:auto; 
border:1px solid #656E75; 
color:#000; 
font-weight:bold; 
} 
#searchThis { 
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDuCS142pih84gd5Ux_QEEE4rRVBza_TW6hY-jFubBRi7xwZ8iwdzGrW9YHfxj7c-Nw4ixDTcFwdO2RTpQbnd5GBanmf6RuVelANj9V-xtBr88bgFaXfopVyMJvgamZ91qMgIgnIb5BwU/s1600/search.png") no-repeat scroll 0 0 transparent; 
display: inline; 
float: right; 
margin:0 50px 0 0; 
height: 24px; 
width: 212px; 
padding:2px 0 0 2px; 
} 
#searchBox, #searchButton { 
background: none; 
border:none; 
} 
#searchBox { 
width:158px; 
color:#bbb; 
font-size: 12px; 
} 
#searchButton{ 
width:42px; 
padding:0px; 
cursor:pointer; 
} 
</style>

Bu arama kutusu HTML ile oluşturulduğundan “Google Custom Serach” deki gibi akıllı değildir ve detaylı arama yapmaz. Aradığınız terim ile blogdaki terimin %100 eşleşmesi gerekir.