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.

Blogger Renkli Şık Arama Kutusu

Kod kutusunu blogumuza eklemek için; Blogger kontrol panelinden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip ediyoruz ve aşağıdaki verdiğim kodları bu alana ekliyoruz.

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #ff00f6;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Aranacak Kelime' type='text'/>
<button id='search-button' type='submit'><span>Ara</span></button>
</form>
</div>

Kodlarda kırmızı ile gösterilen renk kodunu vermiş olduğum diğer kodlardan biri ile değiştirebilirsiniz veya başka bir renk kodu ekleyebilirsiniz.