Blogger Sade Arama Kutusu

Blogger için geçmişte birden fazla arama kutusu yapımına yönelik kod paylaşmıştım. Ancak geçtiğimiz zamanlarda, Google’a benzer ve sade bir yapıya benzer bir arama kodu düzenlemiştim. Ve dolukça da sağlıklı bir görünüme sahip olduğuna inandığım için sizlerle paylaşmak istiyorum. Kod üzerinde yapmanız gereken herhangi bir değişiklik bulunmamakta olup, ilgili kodu, Yerleşim > Gadget Ekle >HTML/JavaScript alanına direkt olarak eklemeniz yeterli olacaktır. Daha sonra ise yan menününüz vasıtasıyla ilgili arama kutusu üzerinde deneme yapabilmektesiniz. İlgili kodu aşağıda veriyorum. Yararlı olması dileğiyle.

ÖRNEK GÖRÜNTÜ

<style>
input.gsc-input {
border:1px solid #d9d9d9;border-top:1px solid #c0c0c0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;height:28px;padding-left:4px;padding-right:4px;vertical-align:top;width:80%
}
input.gsc-input:hover {
border:1px solid #b9b9b9;border-top:1px solid #a0a0a0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-ms-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)
}
input.gsc-input:focus {
border:1px solid #4d90fe;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-ms-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none
}
input.gsc-search-button {
background-color:#4d90fe;background-image:url('http://www.blogger.com/img/widgets/icon_wikipedia_search.png');background-position:center;background-repeat:no-repeat;border:1px solid #3079ed;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;border-radius:2px;color:transparent;font-size:11px;font-weight:bold;height:28px;text-align:center;float:right;width:38px
}
input.gsc-search-button:hover {
background-color:#357ae8;border:1px solid #2f5bb7;color:transparent
}
</style>
<form action='/search' id='search' method='get'>
<input autocomplete="off" type="text" size="10" class=" gsc-input" name="q" title="ara" />
<input type="submit" value="Ara" class="gsc-search-button" title="ara" />
</form>
<br />
Blog'da arama yap »