Blogger Arama Kutusu Eklentisi Nasıl Yapılır?

Yeni bir blog açtığınızda kullanılabilirliği arttırmak için site içerisinde gezinmeyi sağlayan arama kutusunu yani formunu kullanmak istersiniz. Blogger içerisinde aramayı kolaylaştıran arama kutusu ile site içi arama içeriklerinizi daha kolay bulunabilir hale dönüştürebilirsiniz.

Nasıl Yapılır?

Blogger arama kutusu yapmak için ilk olarak sitenizde nereye yapacağınıza karar vermelisiniz. Blogger yerleşim sekmesini de kullanabilirsiniz. Tema bölümünden HTML’yi düzenleyerekde temanızda istediğiniz alana site içi arama kutusu ekleyebilirsiniz. Adım adım blog sitenize arama kutusu formunu eklemek için yapmanız gerekenler:

İlk olarak sitenizde Yerleşim sekmesini daha sonra arama kutucuğunu eklemek için Gadget Ekle’yi tıklayınız.

Karşınıza yeni çıkan pencerede HTML/Javascript tıklayınız.

Açılmış olan ekranda iki bölüm bulunmaktadır. Bu bölümde ilk satıra arama kutusunun başlığını altta ki bulunan satıra ise kodları ekleyeceksiniz. Eklemeniz gereken kodlar:

<style type="text/css">
    #arama-searchbox {
        width: 100%;
        overflow: hidden;
        max-width: 95.5%;
        margin-bottom: 15px;
    }
   
    #arama-input {
        width: 82%;
        padding: 10.5px 4%;
        border: none;
        background-color: #fff;
        box-shadow: 0 0 2px #333333 inset;
        font-family: Roboto;
        font-size: 14px;
    }
   
    #arama-input:focus {
        outline: none;
        background-color: #eee;
        box-shadow: 0 0 2px #333333 inset;
    }
   
    #arama-submit {
        overflow: visible;
        position: relative;
        float: right;
        border: none;
        padding: 0;
        cursor: pointer;
        height: 38.5px;
        width: 10%;
        color: #FFF;
        background-color: #313131;
        font-family: Roboto;
        font-size: 14px;
    }
   
    }
   
    #arama-submit:focus,
    #arama-submit:active {
        background-color: #C42F2F;
        outline: none;
    }

    #arama-submit:hover {
        background-color: #286ab1;
    }

</style>

<form id="arama-searchbox" action="/search" method="get">
    <input type="text" id="arama-input" name="q" placeholder="Ara..." />
    <input type="hidden" name="max-results" value="12" />
    <button id="arama-submit" type="submit">Ara</button>
</form>

Kodları ekledikten sonra Kaydet seçip Düzenlemeyi Kaydet deyiniz. Oluşturmuş olduğunuz widgeti temanızda görüntülemek için sitenizi açıp kontrol ediniz.