Pasang Search Box keren!!

Cara membuat search box - kotak pencarian unik dan keren di Blog - Search box atau kotak pencarian merupakan salah satu elemen yang cukup penting pada sebuah Blog atau Website. Mengapa demikian? Ini dikarenakan search box berfungsi sangat membantu para visitors yang ingin mencari artikel di Blog sobat (So baku kata - katanya) Blogger dan google telah menyediakan widget search box ini, namun banyak Blogger yang menganggap widget bawaan Blogger dan google itu kurang menarik dan tidak cool (Dingin?) Nah kali ini saya akan memposting mengenai tutorial Blog tentang search box yaitu Cara membuat search box - kotak pencarian unik dan keren di Blog. Berikut Cara membuat search box - kotak pencarian unik dan keren di Blog

[ Demo ]

Cara membuat search box - kotak pencarian unik dan keren di Blog :

• Login ke dashboard blog sobat.
• Klik template kemudian edit HTML.
• Copy salah satu kode CSS berikut kemudian paste di atas kode ]]></b:skin> kemudian simpan template.

1. 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;
    }


2. 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;

    }

3. Hitam putih :

#search {

}

#search input[type="text"] {

    background: url(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(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);

    }

• Setelah memasang salah satu kode CSS diatas, selanjutnya sobat klik tata letak kemudian add gadget. Pilih HTML/JavaScript kemudian copy kode berikut kemudian paste di HTML/JavaScript kemudian simpan.

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

  <input name="q" type="text" size="40" placeholder="Cari artikel disini gan..." />

</form>

• Kemudian letakkan widget search box ini dimana saja yang sobat suka :)
• Selesai!

Catatan :

• Sobat dapat mengedit atau memodifikasi kode CSS diatas sesuai selera sobat sendiri, misalnya jenis font yang digunakan, warna, lebar, dll.
• Sobat bisa mengganti tulisan "Cari artikel disini gan..." dengan kata - kata sobat sendiri.

Sekian tutorial tentang membuat search blog keren, Happy Blogging
By Seto

•