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 arz ediyor. 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.
Bu yazımda sizlerle şık bir arama kutusu paylaşacağım. Arama motorumuzun üzerine tıklandığında genişleme efekti var. Arama kutusunun normal genişliği 150 px iken üzerine tıklandığında boyutu 200 px oluyor.
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.
Önizleme
Önizleme sağ tarafta bulunuyor. Üstüne tıklayarak genişleme efektini görebilirsiniz.
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'>Blogda Ara</h2>
<div class='widget-content'>
<center><form method="get" action="/search" id="search_BH">
<input name="q" type="text" size="40" placeholder="Ne aramıştınız?" /> </form></center>
</div>
İsterseniz Blogda Ara başlığını değiştirebilir ya da kaldırabilirsiniz. (Kaldırmak için <h2 class=’title’>Blogda Ara</h2> kısmını silmeniz yeterlidir.)
İsterseniz Ne aramıştınız? yazan kısmı değiştirebilirsiniz.
Teşekkürler hemen kullanmayı düşünüyorum 🙂 Oval yerlerini düzeltip bloguma uygulayacağım
Bunun oval olması siteme uygun değil. Bence sizin blogunuza da uymamış. Düz dikdörtgen şeklinde yapın çok daha iyi.
çok teşekkürler tam sitemin tasarımına göre
Ben teşekkür ederim 🙂