Post Game

Cara Membuat Search Box Mirip Apple com

Cara Membuat Search Box Mirip Apple com

Maybe bagi anda pengguna produk apple seperti safari tidak asing lagi dengan search box seperti di atas, karena jenis Search Box pada gambar tersebut memang di buat mirip dengan situsnya mendiang kaka ipar saya, itu tu Steve Jobs hehe (ngarep). Saya dapatkan Search Box tersebut saya dapatkan dari Bloggermint, dan yang membuatnya Rethnaraj Rambabu (katanya) Search Box tersebut menggunakan CSS 3 dan yang pasti keren lah di pasang  di blog.
Kalo mau liat contohnya emg lagi di pake ma saya salah satunya, tapi kalo mau liat contoh lainnya klik disini.

Nah sekarang kita langsung saja ke cara pembuatanya, cekidot.

1. Langkah paling wahid sih yang pasti masuk dulu ke Blogger.
2. Setelah itu masuk ke Template > Edit HTML > Lanjutkan
3. Lalu cari kode ]]></b:skin>
4. Lalu untuk Search Box jenis berikut,

COPAS kode berikut di atas kode ]]></b:skin>

#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/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 untuk gambar berikut,

#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/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;
    }

nah kalo Search Box yang saya pake

kodenya sebagai berikut

#search {
}
#search input[type="text"] {
    background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    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 {
    background: url(http://www.bloggermint.com/demos/css3searchbox/search-dark.png) no-repeat 10px 6px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }

4. Nah kalo udah pilih salah satu, terus klik Simpan Template
5. Jika sudah, terus klik Tata Letak > Tambah Gadget > HTML/Java Script
6. Terus COPAS kode berikut.

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

 7. Terakhir klik Simpan
end....

Go to link Download