Blogger Arama Kutusu yapmak!

Blogger‘ın kendisine ait arama motoru widgeti mevcut. Fakat bu widget, standart yapılı olduğu için görsel anlamda pek iyi olduğunu düşünmüyorum açıkçası. Dolayısı ile, sizlerle paylacağım arama kutusu bana göre blogger’daki her temaya uygunlukta olan bir arama kutusu. Bu arama kutusu hem sade hem de görsellik bakımından çok sade olduğunu düşünüyorum. Arama kutusunu istediğiniz şekilde değiştirebilirsiniz, yani arama kutusunda yazmasını istediğiniz cümleyi de, kodlarda yer alan yazıyı bulduktan sonra değiştirerek istediğiniz yazıyı koyabilirsiniz. Herneyse, bu arama kutusunun yapımına geçmek istiyorum;

Öncelikle, arama kutusunun CSS kodlarını ekleyelim;

/* Teknobeyin Arama Bölümü
----------------------------------------------- */
#search {height:30px;padding:0;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3YgdaCiANWcBHMq-t9ojN4vi8oABDKS_g2KL56VJlAf8SlqXBY0gfDdUtX3O_zMkx4kHCmBn-aUGVFJEeXSdeiL8qOQsJWI6M4t28s4HJVnp7XBp0mpS4oH0oZAIsyQxUkY-cx_N-uCLy/s0/search-background.gif) top left no-repeat;text-align:left;margin-top:9px;overflow:hidden;}
#search input {border:0;background:none;color:#666666;}
#s {width:140px;padding:4px;margin:3px 0 0 3px;background:none}

Daha sonra, arama motoru kodlarımızı ekleyelim;

<div id='search'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Aramak istediğiniz...&quot;;}" onfocus="if (this.value == &quot;Aramak istediğiniz...&quot;) {this.value = &quot;&quot;;}" type="text" value="Aramak istediğiniz..." />
<input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqV7oOgoPlMzLMoormnP8ALDr6os939hAYIxZEWG5CsnDWATXOeBwT_J4LjfH9hAWa2IkjoBwkw67s_8WycGcFqQtEmr_x83BKK0Zb4FIQY47RZnuZRNWB9RMGZ0PqUHvvCaDu9iHbD6c1/s0/search.gif" style="border:0; vertical-align: top;" type="image" />
</form>
</div>

Not: Arama Kutusu kodlarını, HTML/JavaScript bölümünden widget olarak ta ekleyebilirsiniz.