Cara Membuat Search Box Unik

Kotak Pencarian atau Search Box sangatlah penting untuk dipasang karena berguna untuk memudahkan pengunjung melakukan pencarian pada sebuah web atau blog, dan pada blogger pun sebenarnya sudah ada gadget yang sudah siap pakai,

Namun jika ingin memperindah tampilan Search Box silahkan mencoba Search Box Unik yang akan saya share kali ini,

Search Box yang bergaya Apple ini menggunakan CSS3 dengan  border-radius, box-shadow, text-shadow untuk menampilkan Cool Effect, untuk contohnya dapat dilihat pada yang saya pasang, atau dapat dilihat demonya disini.

Jika ingin Search Box seperti itu juga, langsung aja ikuti Cara dibawah ini

Langkah Pertama :

• Masuk ke Rancangan Tata Letak
• Klik pada Add Gadget
• Lalu Copy Paste kode dibawah ini

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

• Simpan
• Dapat juga ditempatkan sesuai dengan keinginan anda

Langkah Kedua :

• Pilih salah satu kode Search Box dibawah ini
• Masuk ke Rancangan Template EDIT HTML
• Simpan kode yang akan anda pilih diatas ]]></b:skin>

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

ATAU

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

ATAU

3.  Tampilan Apple.com Inspired Search Box

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

Source kode   :   bloggermint.com