Cara Membuat/ mempercantik Kotak Pencarian/search box di blogspot dengan css

Search Box atau Kotak Pencarian salah satu bagian penting dari sebuat blog atau pun website.
Untuk membuat search box di blogspot sangatlah mudah yaitu ada 2 cara dengan klik LayOut, "Add Gadget", dan pilih Gadget "Search Box" atau "Kotak Pencarian" , kemuadian klik Save! dari situ akan terdapat menu search box standar dari blogspot, untuk mendapatkan menu search box yang lebih keren dengan cara kedua yaitu :

Klik LayOut "Add a Gadget", pilih "HTML Javascript", dan Masukan Kode dibawah ini kedalam konten javascript ;

<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" name="q" placeholder="Search here..." type="text" />
<button id="search-button" type="submit"><span>Search</span></button>
</form>
</div>

setelah itu Klik Save.
dan tambahkan kode css berikut ini di atas kode : ]]></b:skin>

#search-box {position: relative;width: 100%;margin: 10px 0 0 0;}#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}#search-box input[type="text"]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}

Demikian lah cara untuk membuat kotak pencarian di blogspot, dan anda bisa mengkreasikan ya sendiri dengan mengubah kode css diatas sesuai keinginan anda.