1 Eylül 2015 Salı

BH Blogger Arama Kutusu

12 yorum
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://lh3.googleusercontent.com/-Ahg_Mo-oIBs/UHxflUJpGFI/AAAAAAAAESQ/cTIHURTBtn8/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("
http://4.bp.blogspot.com/-bGNoSvpp4zo/TgaF4SudPWI/AAAAAAAAAEc/FzD3izjurZQ/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.

12 yorum:

  1. Bende özel arama kullanmıyorun çok sıradan kalıyor hocam sadece bir kaç renk verebiliyoruz o yüzden böyle özgün arama kutuları daha hoş duruyor :)

    YanıtlaSil
  2. Harika bilgi ve yönlendirmeleriniz için çok teşekkürler.

    YanıtlaSil
  3. Hoş bir arama kutusu.
    - Teşekkürler :)

    YanıtlaSil
  4. Merhaba Hocam yeri değil ama 1 2 gündür uğraşıyorum bloğumdaki sorunu çözemedim ne güzel anasayfada yayın yapıyordum devamını kısalt özelliği ekledim çok güzel olmuştu durup dururken yayınlarım kayboldu sadece 1 tanesi görünüyor bir türlü düzeltemedim
    http://y-gain.blogspot.com.tr/ bloğum bu yardımcı olacak arkadaş varsa sevinirim çaresis kaldım :(

    YanıtlaSil
  5. Merhaba hocam
    Blog hocamdada mevcut olan google custom search kutusunu öneririm demişsiniz fakat bunun kullanımına dair detaylı bir makaleniz var mı? Siteye direk kod konuluyor mu? Yoksa siteye özel kod mu alınıyor? Bunları bilmek isterim :)
    Teşekkürler.

    YanıtlaSil
  6. @pdf kitap indir
    Gadgetlar listesindeki arama kutusunu ekleyebilir ya da şu adresten oluşturacağınız arama kutusunun kodlarını HTML/Javascript gadget olarak ekleyebilirsiniz.

    https://cse.google.com.tr

    YanıtlaSil
  7. Hocam blogumla ilgili arama yapiyorum googlede.mesela a oyunu paylastim googlede a ariyorum b oyunu cikiyo neden acaba?

    YanıtlaSil
  8. Çok güzel bir arama kutusu Paylaşım için teşekkürler.

    YanıtlaSil
  9. Yine güzel hoş bir tasarım zamanında merak etmiştim sizin bunu ancak böyle olduğunu öğrenince şimdilik istemedim ama yinede çok başarılı.İyi günler Serdar Kara

    YanıtlaSil
  10. Kendi blogumda bunu kullanmasamda çok hoş bir arama kutusu.Paylaşım için teşekkürler derdar hocam

    YanıtlaSil
  11. Gayet şık bir arama kutusu teşekkürler hocam. Sizin arama kutunuz her ne kadar güzelde olsa google kutusu kadar işlevsel olmuyor. O yüzden Google Custom Search hakkında sizden detaylı bir makale bekliyorum hocam nasıl kullanırız, nasıl ekleriz gibi. :)

    YanıtlaSil
  12. İyi ki varsınız. Yoksa benim gibi çaylaklar onca değerli bilgiyi nasıl birarada bulacaktık....

    YanıtlaSil

Picardes

LİNKLER