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.
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.
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.
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/AVvXsEgsBdbDFqR24w5wogOohaTOLUCHL6XCHjB7WYBj7YEudLSIxempdQYz8G8qRFDJDkGDzvug32isCJcus8bQXJ3obmibod9P8kWu3S2z1iVTpSwS8k3GihnlFma9dujNawTlZrJ7q72BrT4/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/AVvXsEhc7ctYf9JIjTJzEhLtIoS0vM4Id7AUE6NGWwPL9zIex6nyozk6xD4rHolp5eADT2Bb0v1tsQ350lVB5w-moIY8cqq6XY-sxYPwNeQhdVf88UCSF28l8Msz1ZGJ0KWeuqTkL8kfwazJdA/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.
Yorumlar