Search Box With CSS3


Saya sangat berterimakasih pada kalian semua yang masih ingin menunggu tips dari abang cobasanasini langsung aja pada kali ini saya akan mengajarkan bagaimana cara membuat Search Box With CSS3 langsung aja pada tutorialnya : 
  1. Masuk ke blogger
  2. Rancangan
  3. Edit HTML 
  4. Dan Kemudian Centang Expand template widget
  5. Cari Kode Berikut ]]></b:skin>
  6. Lalu pastekan Kode Dibawah Ini diatas kode yang tadi :

Kode Dibawah ini untuk Search Box berwarna Hitam


#search {

}

#search input[type="text"] {
    background: url(search-dark.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #777;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }



Kalo Yang Ini untuk Search Box Berwarna Putih

#search {

}

#search input[type="text"] {
    background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 200px;
    }



Note :
  • Pastekan kode dibawah ini dimana saja ( Ini Kode Pemanggilnya )

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Selamat mencoba :)
Jangan Lupa Komentarnya,,!!!

4Coment :

  1. wah kalo yang ini saya udah pasang sob coba liat aja di blog saya

    BalasHapus
  2. mantap lah kang, berkunjung jg http://bayuecasper.blogspot.com/

    BalasHapus