Blogger CSS Arama Kutusu

Arama kutusu her blogda olması gereken ve ziyaretçilerin site içi arama yapması için büyük bir önem taşır.

Aşağıdaki şık arama kutusunu tek bir adımda sizde blogunuza ekleyebilirsiniz.

Yukarıdaki Arama Kutusunu eklemek için Kumanda Paneli > Yerleşim > Gadget Ekle > HTML/Java Script

yolunu takip edip aşağıdaki kodları yapıştırmanız yeterli olucaktır.

<!-- DBA Software Arama Kutusu Kodları --> 
<style type="text/css"> 
#search_BH { 
} 
#search_BH input[type="text"] { 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Yn19ErTFI9tyZnYF0bDbA_aBLZsj8K91_93392eaMdswkVE4PhLuWYORb9ALsEdLDBl9irkr1X-AI6Ydvuwpn1roF8hdosoK0UmZht8l2gWUofS6qLtCXjLV6pkzLEDIty-eSRJ3e215/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> 
<!-- DBA Software Arama Kutusu Kodları -->

Bu yazıyı beğendiyseniz lütfen aşağıdaki sosyal ağlarda paylaşmayı unutmayınız.