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">setelah itu Klik Save.
<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>
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/
ok
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