Blogger css arama kutusu

Merhaba arkadaşlar blogger için yine güzel bir eklenti paylaşıcas sitenizi için css arama kutusu paylaşıcas gerçekten oldukça şık bir eklenti diyebilirim örneğini sitemizde görebilirsiniz.Arama kutusunun normal genişliği 150 px fakat tıklandığında 180 px boyutunda genişliyor siz kodları istediğiniz gibi ayarlıyabilirsiniz. tabiki.

Bu eklentiyi sidebar ve header kısmında kullanabilirsiniz.Sitenizde çok şık bir görünüm sağlıyacaktır emin olabilirsiniz. :)
Fazla uzatmadan eklentimizin kodlarına geçelim tabiki öncelikle şablonunu genişetiyorsunuz.
ve ilk önce css kodlarını ekliyices.

#search_BH {
}
#search_BH input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgglMnxDgYU16hU1B8xcP4n_TSdX6T95_fOvgAM2GJSFd_t0vN20CjVZJqkU9mQIAAYB-GXb5v1jR_Cn4KEx9iENxK_nOm-cLPhx_907H6Tj2qIF1fFIl38Z7RMvPngX1N1ic2eGQ-Jx3dd/s15/search-dark.png) no-repeat 10px 6px #fff;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #000;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    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: 180px;
}

Daha sonra html kısmını kendi arama kodlarınızla değiştirebilirsiniz. 

<div class='widget-content'>
<center><form method="get" action="/search" id="search_BH">
  <input name="q" type="text" size="40" placeholder="Ne Aramıştınız..." />
</form></center>
</div> 

Continue Reading