BH Blogger Arama Kutusu

Daha önce Blog Hocam’da kullandığım, HTML ve CSS kodları kullanarak oluşturduğum basit bir arama kutusu vardı. Onu kaldırıp yerine Google’ın kendi arama kutusunu koydum fakat eski arama kutusunun kodlarını isteyen çok arkadaş olduğu için buradan paylaşma ihtiyacı hissettim.

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/AVvXsEhnZZuWdNyWSxD_6YQzT4qt1CCgqVBi3ev33hM4LIo2JAPuZH3g0pkOVZILtkgeEZCRt-pLnv1nnUqzjBxf2d7wsezoD1lAx93hVSJir4CSRqcdLlGJbuHPb9jl-x46aa_J24o0R49jBb_4/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/AVvXsEj_fsdc7fhfYKIhMcRGPvfhLte4zaaimfAXpkke7LQfjNDL0dhC2F4oGg9qqgCxSpQ1oi3TLcAP9U5JOQUIgnQWiM_9KaVSifMu_e_l_Q8pWsYbWJXVECHtVz9m8phW_PJWNLyr_Peah9k/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. Eğer görselliğe önem veriyorsanız ve çok fazla içeriğiniz yoksa bu arama kutusunu kullanabilirsiniz fakat işlevselliğe önem veriyorsanız ve blogunuzda çok fazla içerik varsa şuan Blog Hocam’da da olan  “Google Custom Search” ü kullanmanızı öneririm.
BH Blogger Arama Kutusu BH Blogger Arama Kutusu Reviewed by Unknown on 02:23 Rating: 5

Hiç yorum yok