29 Nisan 2013 Pazartesi

Blogger’a Şık CSS Arama Kutusu Ekleyin

38 yorum

Site içi arama kutusu, ziyaretçilerin aradıkları bilgiye rahatça ulaşmaları ve bounce rate değerinizin düşmesi için blogunuz için büyük önem arzediyor. Arama kutusu için en ideal yer blogunuzun heder kısmı veya sidebar’ın en üstüdür. Kısaca, arama kutusu okuyucunun rahat görebileceği bir yerde olmalıdır.

 

Daha önce blogda 2 farklı stilde arama kutusu paylaşmıştım. Ancak boyutları ve tarzı her tasarıma uygun olmayacağından alternatif bir arama kutusu paylaşmak vardı bir süredir aklımda.

 

blogger arama kutusu

 

Bu yazıda paylaşacağım arama kutusu biraz daha şık bir tasarıma sahip ve üzerine tıklandığında genişleme efekti var. Arama kutusunun normal genişliği 150 px fakat sıklandığında 200 px boyutunda genişliyor. 

 

Bu arma kutusunu blogunuza eklemek için Blogger kmanda panelinize giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/Java Script yolunu takip edin ve aşağıdaki kodları yapıştırın.

 

<!-- Blog Hocam Arama Kutusu Kodları -->
<style type="text/css">
#search_BH {
}
#search_BH input[type="text"] {
    background: url(https://lh6.googleusercontent.com/-UrPIk8pMX0k/UT3FSFQG0vI/AAAAAAAAHtE/wKlxbPoWoW0/s15/search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }
#search_BH input[type="text"]:focus {
    width: 200px;
    }
</style>

<h2 class='title'>Ne Aramıştınız?</h2>
<div class='widget-content'>
<center><form method="get" action="/search" id="search_BH">
  <input name="q" type="text" size="40" placeholder="Ara..." />
</form></center>
</div>
<!-- Blog Hocam Arama Kutusu Kodları -->

 

Bu arama kutusunu beğendiyseniz lütfen ağağıdaki butonlar yardımıyla sosyal ağlarda paylaşın.

38 yorum:

  1. Arama kutusu çok şık. Blogunda arama kutusu olmayan arkadaşlar mutlaka eklemeli.

    YanıtlaSil
  2. Çok sevdim :) teşekkür ederim hemen ekledim çok iyi oldu..

    YanıtlaSil
  3. ekledim ama neden çalışmıyor benim blogda ..

    YanıtlaSil
  4. @Naz
    Daha önce eklediğiniz bir script engelliyor olabilir.

    YanıtlaSil
  5. Çok teşekkür ederim,ben de ekledim çok hoş görünüyor.
    http://kitapsiginagi.blogspot.com/

    YanıtlaSil
  6. teşekkür ediyorum hemen bloğumda uyguladım.
    http://goznurum48.blogspot.com/

    YanıtlaSil
  7. Paylaşım için çok teşekkürler ama rengiyle ilgili bir işlem yapılamaz mı?

    YanıtlaSil
  8. @Serkan Cokaydin

    Şu kodun yerine başka bir renk kodu girmeyi deneyin.
    #444

    YanıtlaSil
  9. Çok güzel bir arama kutusu arşivime ekliyorum teşekkürler Serdar abi.

    YanıtlaSil
  10. Merhaba Serdar hocam. Arama kutusunu ekledim. Çok da güzel oldu elinize emeğinize sağlık.

    Ancak arama yaparken birebir eşleşme varsa sonuçlar geliyor. Aksi halde alakasız bir sonuç veriyor veya hiç vermiyor.

    Örneğin kutuya "işletmeci" yazarak arama yaparsanız buluyor lakin "işletme" olarak arama yaparsanız sonuç yok veya alakasız.

    Bkz. http://enginsevim.blogspot.com/

    Bunu düzeltmek mümkün mü?

    Teşekkür ederim.

    YanıtlaSil
  11. @Engin Sevim
    Bu basit bir HTML arama kutusu olduğu için tam eşleşen kelimeleri gösterir.

    YanıtlaSil
  12. Serdar çok güzel valla ama pembe yapayım dedim renk kodunu nasıl bulacağım?
    Sevgiler

    YanıtlaSil
  13. Varmı? senin kadar hızlı cevap veren, teşekürlerrr

    YanıtlaSil
  14. http://derinbilgi22.blogspot.com/ sitesine ekledim ama ortada kaldı nasıl sağa yaslayabilirim?

    YanıtlaSil
  15. hocam sizin kullandığınız arama kutusu sitemde kullanacağım tabi izin verirseniz. ?

    YanıtlaSil
  16. teşekkürler..

    tıklandığında arama kutusunun üzerinde çıkan altın sarısı gibi olan kutuyu nasıl kaldırabilirim

    YanıtlaSil
  17. Hocam üst kategoriye eklediğim butonlara nasıl link vereceğim http://ziyafetver.blogspot.com/

    YanıtlaSil
  18. teşekkürler çok işime yaradı :)

    YanıtlaSil
  19. teşekkürler sorunsuz çalışıyor
    http://kpsstube.blogspot.com

    YanıtlaSil
  20. hocam paylaşım güzel ama onu ben sağ üste almak istiyorum hatta mümkünse başlık resminin sağ tarafına yardımcı olursanız sevinirim.iyi günler
    http://epub-arsivi.blogspot.com.tr/

    YanıtlaSil
  21. teşekkür ediyorum hemen bloğumda uyguladım.
    http://turuncuhane.blogspot.com.tr/

    YanıtlaSil
  22. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  23. kutuya tıkladığımızda etrafında mavi bir çerçeve çıkıyor... Onu nasıl kaldırabiliriz?

    YanıtlaSil
  24. www.hasyemektarifleri.com buda benim blogumdaki hali cok teşekkürler

    YanıtlaSil
  25. Serdar abi bloğuma ekledim yazınca hiç birşey çıkmıyor
    http://oyunaduskun.blogspot.com.tr/

    YanıtlaSil
  26. Uyguladım ,zemin rengini bile değiştirdim.Teşekkür ederim.

    YanıtlaSil
  27. Ellerinize sağlık hocam.Bende uyguladım style kısmını kendim düzeltmeye çalıştım şöyle bir sorunla karşılaştım css ve html'de çok iyi değilmdir arama kutusu var lakin buton yok butonu nasıl ekleyebilrim input olarak mı yoksa css style olarakmı eklemeli ? Cevabınız için teşekkür ederim şimdiden.

    Bloguma beklerim : http://www.ysfclskn.blogspot.com

    YanıtlaSil
  28. Merhaba tıklama yapıldığında boyutu büyüyor bunu nasıl engelleyebilirim? hangi kodu değiştirmem lazım.

    YanıtlaSil
  29. Bir şey sorucaktım hocam bu arama kutusunu bir android apk ye nasıl ekleriz lütfen çok acil

    YanıtlaSil
  30. serdar hacam ben blogumdaki mevcut arama kutusunu kaldırıp google arama kutusunu eklemek istiyorum nasıl yapabilirim

    YanıtlaSil
  31. Arama kutusu için çok teşekkürler. Bu arada rengini değiştirsem bir sorun olur mu?

    YanıtlaSil

Picardes

LİNKLER