Followers

Diberdayakan oleh Blogger.

Home » , » Membuat Search Box Elegant Dengan CSS

Membuat Search Box Elegant Dengan CSS


Kali ini saya akan berbagi cara membuat search box dengan tampilan yang sangat elegant. Seperti yang kita tahu search box sangat membantu kita sebagai alat navigasi web atau blog. Contoh bisa dilihat di blog ini.
Langsung saja simak cara pasang nya.!

1. Login ke Blogger
2. Lalu masuk ke Rancangan
3. Lalu Edit HTML
4. Centang Expand Template Widget
5. Kemudian cari kode ]]></b:skin> (untuk mempermudah pencarian klik F3 atau CTRL + F pada keyboard)
6. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>. lalu simpan.

#search {

}

#search input[type="text"] {
    background: url(http://1.bp.blogspot.com/-Bz_fY7BI6sQ/T-F-JG5qlcI/AAAAAAAABIo/P8ItIUjvyTQ/s1600/cari.png) no-repeat 10px 6px #5E5E5E;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -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: 185px;
    }
Keterangan: ganti kode berwarna Merah dengan kode warna sesuka kalian.

7. Letakan kode yang ada di bawah ini pada Add Gadget ( HTML / JavaScript ).
<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>
8. Simpan dan lihat hasilnya.!
^__^
( Happy Blogging )

0 komentar:

Prev home