Diary Princess Stuff Friends F.A.Q. Request

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: