Blogger'a Şık Css Arama Kutusu EklemeYorum yok

Blogger'a Şık Css Arama Kutusu Ekleme

Blog sitenize arama kutusu eklemek istiyorsanız bu özellik tam size göre. Şık ve oldukça kullanışlı olan bu arama kutusunu sitenize eklemenizi öneririm.

 Arama kutuları ziyaretçinin aradığı bilgileri kolay bir şekilde bulmasını sağlar. Bu da ziyaretçi memnuniyetini sağlar ve siteniz daha fazla hit alır. Şimdi bu özelliği sitenize ekleyelim.

Arama Kutusunun Görüntüsü

Arama kutusunun genişliği 150px, fakat üzerine tıkladığınız zaman 200px boyutunda genişliyor. Bu değerleri istediğiniz şekilde ayarlayıp bloğunuza ekleyebilirsiniz. Her türlü blog temasında çalışır.

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

<!-- Skybulut Arama Kutusu --> 
<style type="text/css"> 
#search_BH { 
} 
#search_BH input[type="text"] { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ2n7Sfl69xCQ48lpGtwkcAo-QCDQrplw7zC6Z5M44ti8fFrVspOIoGp3I87JT-iouaiGoTxqKuJ5o5LPEBTdcnxdcSXPYYkiTFvaIPy6CH7PhX3oR41KNpK77_dv00N1RtFZ3pLKzj2gc/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> 
<!-- Skybulut Arama Kutusu-->

Ve işlem tamam. İnşallah beğenmiş sinizdir. Herhangi bir sorunla karşılaşırsanız yorum atarak belirtiniz.