Blogger Arama Kutusu

Blogunuza giren bir kişinin aradığını bulabilmesi için blogunuzda böyle bir arama kutusu (search box) eklentisi kullanmanız şarttır.

Benim de bizzat kullandığım ve yanda gördüğünüz arama kutusunu blogunuza rahatlıkla ekleyebilir ve bu sayede blogunuza giren kişilerin aradığını rahatlıkla bulmasını sağlayabilirsiniz.

 Lafı çok uzatmadan arama kutusunu blogunuza nasıl ekleyeceğinizi anlatayım.


Blogger Kumanda Paneline girip Yerleşim>Gadget Ekle kısmından Html/Javascript seçeneğini seçip aşağıdaki kodu oraya yapıştırmanız yeterli olacaktır.

<style type="text/css">
    #search_BH {
    }
    #search_BH input[type="text"] {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTTiRteWpMzrFO_Z0xwG4jitQaUiaD9Mh-iPQnQ7fYSjZzggB77_6p0Bj67BsqYKnA3nkovYBqoA4aIYJlL6RN7PCRTdCNZIlWp0UxGdgOyIWt0BfCfJl0lySYlQY05mONpl359Rf5vd9c/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="Ara..." />
    </form></center>
</div>

Eğer isterseniz kodun;

<h2 class='title'>Blogda Ara</h2>

kısmındaki Blogda Ara başlığını kendinize göre ayarlayabilirsiniz.