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.

6 comments

thanks infonya gan
http://ramuantradisionalkita.com/

Thanks sob artikelnya sangat bermanfaat sekali :)
Izin nyimak saja ya sob
http://goo.gl/VrnFlw

bro, saya uda pasang search bar nya, tp search bar default dr blogger nya gabisa dihapus. bisa bantu saya? masih pemula

bisa saya coba nie ...
nice post gan

wah keren turotial nya gan, thanks


EmoticonEmoticon