Google Tarzı Sabit Arama Kutusu

Arama kutuları ziyaretçilerin aradıkları içeriğe kolayca ulaşabilmesi açısından çok mühim. Hatta vakit vakit siz bile ardığınız bir konu için blogunuzdaki arama kutusunu kullanabilirsiniz. Özellikle içerik sayınız fazla ise. Bu bakımdan daha önce 2 değişik arama kutusu paylaşmıştım. Bunlar:

 

• Açılır Arama Kutusu
• PSD Arama Kutusu

Bu kez paylaşacağım arama kutusunu diğerlerinden ayıran pek çok özellik var. Örneğin tarz olarak Google’ın tarzına sahip. Ayrıca daha önce paylaştığım açılır arama kutusundaki tıklayınca açılma efekti bunda da var. En mühim özelliği ise blogun bir köşesinde sabit kalması. Floating ( yüzen, kayan ) denen bu özellik sayesinde ziyaretçiler sayfayı aşağı yukarı kaydırsa bile arama kutusu hep önlerinde olacak.

 

 

Sadece CCSS3 tekniği kullanılarak oluşturulan bu arama kutusunun nasıl çalıştığını daha iyi anlamak için aşağıdaki demo videoyu izleyebilirsiniz.

 

 

Bu arama kutusunu kullanmak için yapmanız gereken tek şey Blogger kumanda paneline girdikten sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izlemek ve aşağıdaki kodları eklemek.

 

<!-- Portakal Kabuğu Google Tarzı Sabit Arama Kutusu -->
    <div class='bh-arama' id='bh-arama'>
      <form action='/search' id='bh-aramaformu' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ara...&quot;;}' onfocus='if (this.value == &quot;Ara...&quot;) {this.value = &quot;&quot;}' type='text' value='Ara...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </span></button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtTg30NgDGHp5abnMAOBi2y-nDcNR3iyPnqtUnAdtdz0Z3EQZrX3u6y6fNlWmEJ-Zon7Yw-xpws7zQr7EyB4hQdPe_Gu0ceNzxvBSXsHIe0UBrzzr1TzB-vwdWt3Ii4Fp0abNhIvzk9KQ/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.bh-arama {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!-- Portakal Kabuğu Google Tarzı Sabit Arama Kutusu –>

 

Arama kutusu sayfanın sağ üst köşesinde konumlanacak biçimde kodlanmış. Eğer sol üst köede durmasını istiyorsanız right: 0; yazan yeri left: 1% olarak değiştirmeniz yeterli.

Paylaş

BLOG SEO , teknoloji

Melisa