Tutorial cara membuat search box Hover


KONNICHIWA!
Hari ini aku mau post tutorial cara membuat search find seperti punyaku nih...!
karena sudah lama tidak mengepost, terus udah selesai ujian...! (.^-^.) jadi aku buka blogger aja deh!

next ya...!



  1. Buka blogger.
  2. lalu pencet tata letak/layout.
  3. pencet tombol tambahkan gadget.
  4. pilih html java script.
  5. simpan code dibawah ini.
--------------------------------------------------------------------------------------------------------------------------
Code =



<style>
#nbc-searchexpandbox1
{
padding:10px;
}
#nbc-searchexpandsubmit1
{
border:1px dashed #ff80ff;
border-radius: 20px;
background: #ffbfff;
padding:5px;
color:#ffffff;
font:14px Arial;
}
#nbc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:3px;
color:#888888;
font:14px verdana;
transition: width 0.5s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:45px;
}
#nbc-searchexpandinput1:hover
{
width:110px;
}
</style>
<div id='nbc-searchexpand1'>
         <form action='/search/max-results=8'  method='get' id="nbc-searchexpandbox1">
            <input name='q' id='nbc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchexpandsubmit1' type='submit' value='Find'/>
         </form>
      </div>
<div/></div></div>


Red kalian bisa pake text lain.







Orange kalian bisa pake text lain.







Blue: tombol 







Purple: tempat search 







Pink: warna text.







Grey: kamu bisa ganti dengan solid/dotted (sesuai selera).







Green: warna background.






Yellow: warna border.


        6.Save.
--------------------------------------------------------------------------------------------------------------------------


semoga berguna ya! (^.^)
Thanks for reading~ hope you enjoy my post!

6 komentar: