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...
