13 Ağustos 2013 Salı

Google Tarzı Sabit Arama Kutusu

12 yorum

Arama kutuları ziyaretçilerin aradıkları içeriğe kolayca ulaşabilmesi açısından çok önemli. Hatta zaman zaman 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 farklı arama kutusu paylaşmıştım. Bunlar:

 

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 önemli ö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.

 

Google Tarzı Sabit Arama Kutusu

 

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.

 

<!-- Blog Hocam 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("http://4.bp.blogspot.com/-gAHYfEEtPjg/T0t5-AtLCmI/AAAAAAAAAJ8/w87kGhEAYyQ/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>
<!-- Blog Hocam Google Tarzı Sabit Arama Kutusu –>

 

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

12 yorum:

  1. Hocam öncelikle çok teşekkürler. Size bir sorum olacak, ben bu arama kutusunu kendi arama kutum ile değiştirmek istiyorum. Aynı zamanda yukarı aşağı inip-çıkarken takip özelliğide olmasın istiyorum. Bunun için hangi kodları çıkarmalıyım ? Neler yapmalıyım ?

    Yardımcı olursanız sevinirim. İlginiz ve alakanız için teşekkür ederim.

    YanıtlaSil
  2. .bh-arama yazan yerler arama kutusunu tutan kodlara aittir. O kısımlara dokunmadan diğer yerlere kendi kodlarınızı yazabilirsiniz.

    YanıtlaSil
  3. Hocam "" Bu Yazıyı Ekliceğiz mi ?

    YanıtlaSil
  4. eklendiği zaman sağda ve solda ki diğer eklentilerin hepsi kayboluyor.Nedendir ki blog hocam

    YanıtlaSil
  5. merhaba hocam
    benim bi sorum olucak,bu arama kutusunu bloğuma ekledim çok güzel oldu fakat sayfa ile birlikte aşağı kaymasın orda sabit kalsın istiyorum,bunun için yapabileceğim birşey varmı acaba?
    ilgilenirseniz çok mutlu olurum..
    saygılar..
    http://benimisimdikis.blogspot.com.tr/

    YanıtlaSil
  6. @Terzi Esma
    Kodlardan position: fixed; satırını kalfdırmayı deneyin.

    YanıtlaSil
  7. dediğinizi yaptım fakat tamamen yok oldu,neyse sorun değil hocam bu şekilde kullanırım
    teşekkürler..

    YanıtlaSil
  8. Merhaba hocam.Ben bu arama kutusunu kullanıyorum.Pozisyonu ve şekli çok güzel:Ama bir sorunum var.Bu şekilde arama yaptığımızda etiketleri arıyor.Aynı zamanda Google arama kodlarını kullanıyorum.O zamanda önce sayfa yenilenip etiketler gösteriliyor sonra google arama sonuçları çıkıyor.

    Ben bu kodları kullanarak google araması yapmak istiyorum.Yani google özel arama kodlarını bu kodlara dahil etmek istiyorum.Bunu yapmak mümkün mü acaba ?

    demek istediğim etiketi aramasın.Sadece google özel arama kodlarımı bu kodlar ile birleştirmek istiyorum.

    YanıtlaSil
  9. Hocam bana cevap vermediniz ?

    YanıtlaSil
  10. @CybeR r
    Google custom search boxın HTML kodlarını bu arama kutusunun HTML kodlarıyla değiştirmeniz yeterli. Ancak stiller uygulanmaz. Sadece pozisyonu uygulanır.

    YanıtlaSil
  11. Hocam ben bir yerde sabit kalmasını istiyorum mesela facebook sayfası beğen widgetinin üzerinde ne yapmam lazım? Lütfen cevap bekliyorum...
    Bkz: harunistenci.blogspot.com

    YanıtlaSil

Picardes

LİNKLER