Kotak Pencarian Dengan Efek Scroll

bagaimanakah cara membuat kotak pencarian blog dengan efek scroll / memanjang ketika pointer mouse diarahkan ( hover ) .. ???

Baiklah , blognya mastony akan mengulas kembali Tutorial mengenai Cara membuat kotak pencarian blog dengan efek scroll . Efek scroll ini sebetulnya adalah hasil percampuran efek CSS Transistion dengan CSS width dan di atur ketika dikunjungi pointer mouse akan memanjang secara perlahan dan menggunakan jQuery .
oy,pada artikel sebelumnya yaitu cara membuat mesin telusur di blog silahkan simak disini mengenai mesin telusur blog , di situ diterangkan menggunakan gambar sebagai background . nah ! kali ini kita menggunakan file gambar sebagai submit ( search ) yuk kita lihat sama - sama !!

Lihat Disini
HTML FORM :

HTML FORM : <form action="http://situsberit.tk/search" id="pencarianBox" method="get"> <input alt="Submit" id="searchImg" src="https://06080c19-a-62cb3a1a-s-sites.googlegroups.com/site/mas4nton/icon-blog/search%20left.png" type="image" width="25" height="25"/> <input id="searchScroll" name="q" type="text" /> </form>  

KODE CSS :

<style>#pencarianBox{width:auto;height:30px;margin:0;padding:0;background:#444444;border:1px solid #ddd; border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;-o-border-radius:6px;float:right;} #searchImg{float:right;display:block;margin-top:2px;} #searchScroll{margin-right: 2px;padding:4px;width:80px;height:20px;font-size:15px;border:1px solid transparent;color:#fff;transition:all 0.4s;-o-transition:all 0.4s;-moz-transition:all 0.4s;-webkit-transition:all 0.4s;color:#fff;display:block;float:right;background:transparent;}  </style>

jQuery Script .

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script>$(document).ready(function(){$("#searchScroll").click(function(){$(this).css("width","140px");}); $("#searchImg").click(function(){$("#searchScroll").css("width","80px");});}); </script>

NOTE : untuk width:90px adalah lebar kotak sebelum di hover sedangkan 140px ketika mouse mengunjungi .
dan untuk type="image" width:25" height="25" lebar dn tinggi gambar submit .
https://06080c19-a-62cb3a1a-s-sites.googlegroups.com/site/mas4nton/icon-blog/search%20left.png adalah url gambar jika anda ingin mengganti dengan gambar milik sobat ganti aja urlnya .
TRANSITION efek memperlambat pergerakan elaman atau silahkan baca disini mengenai EFEK AUTO ZOOM PADA GAMBAR .
dan mungkin saya rasa cukup disisni tutorial mengenai cara membuat Kotak Pencarian blog Dengan Efek Scroll ini selesai semoga bermanfaat .