Blogger Arama Kutusu Ekleme

Blogger Arama Kutusu Ekleme.Blogger site içi arama kutusu eklentisi ekleme,ziyaretçilerinizin blogunuzda aradığını hızlı ve kolay bulmasını sağlayan bir eklentidir.Bu eklenti ile ziyaretçilerinizin sitenizden çıkarken memnun kalmasını ve tekrar gelmesini sağlayabilmek amacıyla çok önemlidir.

Blogger arama kutusu için en uygun yer header yanıdır.Arama kutusunun header yanında olması ziyaretçilerinizin arama kutusunu çabuk görmesini ve site içi aramalarını daha çabuk yapabilmelerini sağlar.

Bu yazımızdaki arama kutusu örneğimiz aşağıdaki tasarıma sahiptir.

1.Tasarım:

Bu tasarımımız oldukça güzel ve kullanışlıdır.Arama kutusu içerisinde Enter keywords yazmaktadır.Arama butonu içerisinde de Search yazmaktadır.Bu yazıları değiştirmek isterseniz aşağıda kırmızı ile yazdığım yazıları kendi isteğinize göre doldurabilirsiniz.

<form action='/search' id='searchbar' method='get'>

<div>

<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter keywords&quot;;}' onfocus='if (this.value == &quot;Enter keywords&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter keywords'/>

<input id='searchsubmit' type='submit' value='Search'/>

</div>

</form>

Kırmızı ile yazdığım alanları kendi isteğinize göre doldurabilirsiniz.


2.Tasarım:

Bu arama kutusu tasarımımızda oldukça şık bir görünüme sahiptir ve ziyaretçilerinizin hoşuna gidebilecek bir tasarıma sahiptir.

  

<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'>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> 

Kırmızı ile yazdığımız alanları kendinize göre yazabilirsiniz.

Blogger Arama Kutusu Ekleme:

Blogger kontrol paneline giriyoruz ve Yerleşim > Gadget Ekle > HTML/Java Script adımlarını izliyoruz.

Yukarıda verdiğimiz tasarımlardan istediğini bir tanesinin kodlarını alıyoruz ve yapıştırıyoruz.

Blogger arama kutusu eklentisi hayırlı olsun.Yazımızı okuduğunuz için teşekkür ederiz...