Membuat Kotak Search diblog

Dipagi Hari ini saya Selaku Admin Alkian (Fahmy Athailla Al Majid), akan memposting sebuah tutorial simple mengenai Cara Membuat Kotak Search ala Fahmy Athailla, Kaya gimana bentuk kotak Searchnya penasaran ya? ok langsung saja simak tutorial dibawah ini :

Langkah pertama pastekan code dibawah ini diatas ]]></b:skin> :

.button_search{
font-family:Arial;
color:#000;
background-image: linear-gradient(bottom, rgb(33,199,197) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -o-linear-gradient(bottom, rgb(33,199,197) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -moz-linear-gradient(bottom, rgb(33,199,197) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -webkit-linear-gradient(bottom, 
rgb(33,199,197) 13%, rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -ms-linear-gradient(bottom, rgb(33,199,197) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -webkit-gradient(
linear,left bottom,left top,
color-stop(0.13, rgb(33,199,197)),
color-stop(0.57, rgb(60,239,237)),
color-stop(0.79, rgb(90,255,255)));
border:solid 1px #555;
border-radius:5px;
box-shadow:1px 1px 1px #000;
}
.button_search:active{
box-shadow:inset 1px 1px 1px #000;
position:relative;
top:1px;
}
.button_search:hover{
background-image: linear-gradient(top, rgb(37,194,191) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -o-linear-gradient(top, rgb(37,194,191) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -moz-linear-gradient(top, rgb(37,194,191) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -webkit-linear-gradient(top, 
rgb(37,194,191) 13%, rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -ms-linear-gradient(top, rgb(37,194,191) 13%, 
rgb(60,239,237) 57%, rgb(90,255,255) 79%);
background-image: -webkit-gradient(
linear,right top,right bottom,color-stop(0.13, rgb(37,194,191)),
color-stop(0.57, rgb(60,239,237)),color-stop(0.79, rgb(90,255,255)));
}
.textinput{
border:solid 1px #555;
width:50px;
-webkit-transition:all 500ms linear;
-moz-transition:all 500ms linear;
-o-transition:all 500ms linear;
-ms-transition:all 500ms linear;
transition:all 500ms linear;
}
.textinput:focus{
width:200px;
}
.textinput:hover{
border:solid 1px #D8C46B;
}

Selanjutnya Pastekan code dibawah ini didalam widget jangan lupa untuk memilihnya dibagian tab HTML/Javascript.

<form action='http://nama-blogmu.blogspot.com/search' method='get'>
<input class='textinput' name='q' size='30' type='text'/>
<input value='Search' class='button_search' name='submit' type='submit'/>
</form>

Info : Ganti URL http://nama-blogmu.blogspot.com/search, dengan Nama blog anda, contoh seperti ini.

<form action='http://alkian.blogspot.com/search' method='get'>
<input class='textinput' name='q' size='30' type='text'/>
<input value='Search' class='button_search' name='submit' type='submit'/>
</form>

Contohnya seperti ini :

Warna bisa disesuaikan ^_^, bagi yang kurang mengerti silahkan bertanya dikolom komentar, Insya allah Fast Respon :D.