Blogger’a Şık CSS Arama Kutusu Ekleyin

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.

 

 

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHJi35XvZqP2Mg4AH82mDpH-xodmm5v9gEi490SLrtvJo4dMF8bYUQkaJTGhUrh0mkNNKCqXDL8jKkQp2WuAyMeZwD1X_MWeckNoyWfBfwlbNRW_ojJ6HumV3BmxRsIOFV8UkNoBiK08Dd/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.