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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' 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.
