CSS İle Oluşturulmuş Blogger Arama Kutusu

 

Bugün sizlere bloglarımız için CSS ile oluşturulmuş bir arama kutusunun kodlarını taktim edeceğim.Arama kutumuz sadece blog içindeki yazıları aramaktadır.Ve eski arama kutuları gibi yazıların tam başlıklarını istemez.CSS ile buton ve arama kutusu zenginleştirilmiştir.

 Bu güzel arama kutusunu nasıl ekleyeceğinizi anlatacağım.

Öncelikle CTRL+F ile aşağıdaki kodumuzu bulalım.

]]></b:skin>

Bulduğumuz kodun hemen üzerine aşağıdaki CSS kodlarını ekleyin.

<--- Arama Kutusu --->

#w2bOldSearch {
  display: block;
  clear: both;
  margin: 10px 0;
}

#w2bOldSearch #w2bSinput {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2vUPAlgpr23cphiGdIUbgxSD5g7M426n4mgupuman_SvIlkD1oxspMwq0TrKILCZTak2AFCoHNoajRc920JHKuttktLpQoOCMhqYFow65o97ETDvt28tuzy5JkCHsV68EN7p-judUKPrg/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;
  padding: 7px 15px 7px 35px !important;
  color: #444;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #D3D3D3 !important;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  -webkit-box-shadow: 1px 1px 2px #CCC inset;
  -moz-box-shadow: 1px 1px 2px #CCC inset;
  box-shadow: 1px 1px 2px #CCC inset;
}

#w2bOldSearch #w2bSsubmit {
  color: #444;
  font-weight: bold;
  text-decoration: none;
  padding: 6px 15px;
  border: 1px solid #D3D3D3;
  cursor: pointer;

  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;

  background: #fbfbfb;
  background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
  background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
  background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
  background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
  background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

<--- Arama Kutusu Bitiş -->

Şimdi ise HTML kodlarımızı vereyim.

<div id="w2bOldSearch">
  <form action="/search">
    <input type="text" name="q" id="w2bSinput" />
    <input type="submit" value="Ara" id="w2bSsubmit"/>
  </form>
</div>

Yukarıdaki kodu ister widget olarak ister temanız da nerede gözükmesini istiyorsanız oraya ekleyebilirsiniz.
İyi bloglamalar...