Cara Membuat Kotak Pencarian Keren Di Blog

Okeh! Sekarang Yang Mau Gue Posting Adalah Cara Membuat Search Box Keren Di Blogger. Search Box Yang Gue Maksud Disini Bukan Search Box Yang Biasa. Namun Memiliki Efek Animasi, Yang Tentunya Sangat Keren. Search Box Ini Menggunakan CSS3, Jadi Jika Digunakan Pada Blog, Akan keren. Preview Kasarnya Bisa Dilihat Pada Gambar Diatas. Nah Untuk Caranya, Mari Kita Bahas.

1. Login Blogger Dulu.
2. Masuk Ke Template > Edit HTML > Lanjutkan.
3. Centang Expand Template Widget.
4. Cari Kode ]]></b:skin>, Copy Kode Berikut Dan Letakkan Di Atas Kode ]]></b:skin>

Seacrh 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;

    }

Priview Search Box on Dark Background :

Seacrh 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;

    }

Preview Seacrh Box on Light Background :

Nah Silahkan Dipilih. Di Gambar Previewnya Ada Dua Search Box. Bagian Atas Adalah Search Box Saat Belum Diklik, Dan Bagian Bawah Adalah Search Box Kalo Udah Di Klik. Search Boxnya Akan Memanjang Gitu... Silahkan Dipilih, Mau Yang Search Box on Dark Background Atau Search Box on Light Background. Udah Milihnya? Jangan Kelamaan, Karena Ada Langkah Terakhir. Simak Langkah Terakhirnya.

1. Masuk Ke Tata Letak > Add Gadget. Atau Bisa Juga Di Edit HTML.
2. Copy Kode Ini, Lalu Pastekan Di Tempat Yang Lo Mau.

<form method="get" action="/search" id="search">

  <input name="q" type="text" size="40" placeholder="Search..." />

</form>

Kalo Udah. Save And Enjoy... Hadeuh... Panjang Juga... Ya Udahlah, Segitu Aja. Thanks!