Search Box With CSS3

Postingan kali ini gw mau share Trik Blogger nih ,yaitu Search Box With CSS3 di simak yahh sob ....


untuk demo bisa liat di sidebar kanan ada search box ,nah itu dia contohnya

langsung aja dehh tanpa basa basi


1.Masuk ke blogger >> Rancangan >> Edit HTML dan centang expand template widget

2.Letakkan kode berikut diatas ]]></b:skin>

Search Box on Dark Background


#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;
    }



Search Box on Light Background

#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;
    }


Dan terakhir untuk kode pemanggilnya nih

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

Silahkan kreasikan sendiri yahh semoga bermanfaat

sumber

About Rio Apri

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

2 Discussion:

  1. oh iya sob, itu url backgroundnya apa memang seperti itu?

    atau adakah file yang bisa didownload lalu di simpan di image hosting?

    mohon pencerahannya sob :)

    BalasHapus
  2. Sukses gan, cihuyyyy .. nice info :)

    BalasHapus