Merhaba arkadaşlar İsmail Usluer'in miniblog temasını kullanıyorum bu denli sade bir temanın ortasına arama kutusu eklemek istemedim bunun yerine yan açılır menü düşündüm.

Düşündüğüm şey;
Fare imleci üzerine geldiğinde veya tıklandığından yandan arama kutusu çıksın. Fare imlecini geri çektiğimizde menü kapansın. Kapalı iken sadece büyüteç resmi görünsün açıldıktan sonra arama kutusu olsun. jQuery kodlarını araştırdım ama pek bir şey bulamadım acaba nasıl yapabilirim bu menüyü? :o

Ek Olarak: Arkadaşlar uğraştım çok amatörce bir şey yaptım ordan burdan toplayarak. Düzeltip tekrar sunacak biri varsa çok güzel olur.

Syle.css'ye eklenecek kodlar;

.search-submit { display:block; float:left; width:60px; height:40px;
float:left; background: #fff; -webkit-box-shadow: inset 0px 0px 2px #fff; -moz-box-shadow: inset 0px 0px 2px #fff; box-shadow: inset 0px 0px 2px #000; border: 1px solid #000; -moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px; font-size:11px; color:#999; transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; font-weight:bold; color:#000;}

.arama-alan {
width:177px;
height:32px;
outline:none;
-moz-border-radius: 5px 0px 0px 5px;
-webkit-border-radius: 5px 0px 0px 5px;
border-radius: 5px 0px 0px 5px; background-color:#FFF; border:1px solid #CCC; padding:3px; line-height:25px; font-size:11px; float:left; background-image: #FFF; background-repeat:repeat-x; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:000;
}


Arama kutusunu eklemek isteğiniz yere eklenecek kod:

<script>
</script>

<script>
//
</script>











"if(this.value=='')this.value=this.defaultValue;" value="">



Buda nasıl göründüğü:

http://jsfiddle.net/yy2YQ/1/