Blogger için Arama Kutusu Oluşturmak

Kullandığınız ya da kullanmak istediğiniz bazı temalarda arama kutusu olmayabiliyor. Bu içerikte paylaştığım arama kutusunu blogunuzun header, sidebar vs alanlarında kullanabilirsiniz.

Peki kullandığınız Blogger temasına arama kutusunu nasıl eklersiniz?

İlk olarak Blogger > Yerleşim > Gadget Ekle yolunu izleyerek HTML/JavaScript eklentisi ekleyelim. Daha sonra bu eklentinin içerisine aşağıda aşağıdaki kodları yapıştıralım. Ben bu arama kutusunu responsive —yani her çözünürlükte kullanabileceğiniz— hale getirdim. Koyu harflerle belirttiğim yerleri kendi zevkinize göre düzenleyebilirsiniz.

Kod
<style type="text/css">
    #hbz-searchbox {
        width: 100%;
        overflow: hidden;
        max-width: 95.5%;
        margin-bottom: 15px;
    }
   
    #hbz-input {
        width: 82%;
        padding: 10.5px 4%;
        border: none;
        background-color: #fff;
        box-shadow: 0 0 2px #333333 inset;
        font-family: Merriweather;
        font-size: 14px;
    }
   
    #hbz-input:focus {
        outline: none;
        background-color: #eee;
        box-shadow: 0 0 2px #333333 inset;
    }
   
    #hbz-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: Merriweather;
        font-size: 14px;
    }
   
    }
   
    #hbz-submit:focus,
    #hbz-submit:active {
        background-color: #C42F2F;
        outline: none;
    }

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

</style>

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