Blogger Arama Çubuğu Kodu - Kaliteli Kodlar

Anasayfa > CSS Eklentiler > Blogger Arama Çubuğu Kodu

21 Şubat 2019 Perşembe

Blogger Arama Çubuğu Kodu

Blogger arama çubuğunuzu daha modern , kullanışlı ve blogunuzu daha estetik bir şekilde göstermesi için aşağıda ki Blogger Arama Çubuğu Kodunu blogunuza ekleyebilirsiniz. Kodu nasıl ekleyebileceğinizi sayfanın en altında anlattık.

BLOGGER ARAMA ÇUBUĞU EKLENTİSİ

Bloggerın arama çubuğunu daha güzel ve kullanışlı bir hale getirebilirsiniz. Size vermiş olduğumuz kod ile bloggerın arama çubuğunu sadece bir kod ile değiştirebilir daha şık ve sitenize uygun bir şekilde kodu kullanabilirsiniz.

Blogger Arama Çubuğu Kodu Ekle

BLOGGER ARAMA ÇUBUĞU kodu

Aşağıdaki Blogger Arama Çubuğu Kodunu olduğu gibi sitenize ekleyin nasıl ekleneceğini bilmiyorsanız sayfanın altında kodu nasıl ekleneceğini paylaştık. Kodu kopyaladıktan sonra sayfanın en alt kısmında ki maddeleri takip edebilirsiniz.

<style>
<style type="text/css">
    #hbz-searchbox {
        min-width: 250px;
        margin: 10px auto;
        border-radius: 3px;
        overflow: hidden;
        max-width: 300px;
    }
   
    #hbz-input {
        width: 59.2%;
        padding: 10.5px 4%;
        font: bold 15px "lucida sans", "trebuchet MS", "Tahoma";
        border: none;
        background-color: #EEE;
    }
   
    #hbz-input:focus {
        outline: none;
        background-color: #FFF;
        box-shadow: 0 0 2px #333333 inset;
    }
   
    #hbz-submit {
        overflow: visible;
        position: relative;
        float: right;
        border: none;
        padding: 0;
        cursor: pointer;
        height: 40px;
        width: 32.8%;
        font: bold 15px/40px "lucida sans", "trebuchet MS", "Tahoma";
        color: #FFF;
        text-transform: uppercase;
        background-color: #D83C3C;
    }
   
    #hbz-submit::before {
        content: "";
        position: absolute;
        border-width: 8px;
        border-style: solid solid solid none;
        border-color: transparent #D83C3C;
        top: 12px;
        left: -6px;
    }
   
    #hbz-submit:focus,
    #hbz-submit:active {
        background-color: #C42F2F;
        outline: none;
    }

#hbz-submit:focus::before,
    #hbz-submit:active::before {
        border-color: transparent #C42F2F;
    }

#hbz-submit:hover {
        background-color: #000000;
    }

#hbz-submit:hover::before {
        border-color: transparent #000000;
}
</style>

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

Blogger Arama Çubuğu Kodu bu şekilde gözükecektir.

Blogger Arama Çubuğu Kodu Ekle

Blogger Arama Çubuğu Kodu Önizlemesi

Blogger Arama Çubuğu Kodu Nereye ve Nasıl Eklenir?

Blogger sol taraftaki kontrol paneli >> Yerleşim >> Gatget Ekle >> Html/JavaScirpt Ekle >> İçerik kısmına koldarın tamamını yapıştırın >> Kaydet

Bu yazı ile ilgili düşüncelerinizi yorum yaparak belirtebilirsiniz.

Blogger Arama Çubuğu Kodu

4/ 5

Oleh admin

K a l i t e l i K o d l a r

Blogger ve diğer platformlar için kaliteli ve işe yarar kodlar ile hizmet veriyoruz.