Blogger Harika Geçişli Arama Kutusu

Arkadaşlar Bloğunuzu Geliştirmek için Birçok kod arıyorsunuz ve Belirli ihtiyacınız olan ve şık şeyler arıyorsunuz. Sizlere Üzerine Gelince Açılan Süper Bir geçişli arama kutusu sunacağım öncelikle
Bunun şıklığının yanı sıra kullanışıda çok güzel bir
arama kutusu iyi kullanışlar dilerim



CSS Kodları

#search input[type="text"]:hover {width:208px;border:1px solid #CCC;}
#search input[type="text"] {
background: #FFF url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFSdL0revzuJN7ZK_ourhXIxO5w_omamgMk6Brkw4Emxh6Az4QGvC_82o2IFBi3Ie1ks0CjdCpsn9WwV8DTlWd4oVOnRUUvi-o_FQhe3QwxqlXrSOlBm8PN1594rZTwtXnr0J2dZMpSbWL/s0/search_32x32-32.png")no-repeat center left;
font-size: 13px;
color: #222;
width: 0px;
padding: 10px 0px 11px 35px;
z-index: 9;
border: 1px solid #fff;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
margin-bottom: -1px;
position: absolute;
top: 0px;
right:20px;}

HTML Kodları

<form action="http://blogismi.com/search/" id="search" method="get">
<input name="q" placeholder="Ne Aramıştınız ?" size="40" type="text"></form>

Önizleme Alttann Resulta Tıklayarak Görebilirsiniz.

KAYNAK

Share this: