Kali ini saya akan post tentang Search Box, search box ini hampir sama persis dengan search box yang saya gunakan sekarang tepatnya di sebelah kanan atas blog ini. Namun pada dasarnya sama saja dengan search box lainnya, hanya saja saya beri sedikit sentuhan box shadow untuk memperindah tampilannya. Search Box ini sangat cocok digunakan pada blog yang berlatar belakang gelap karena terdapat efek box-shadow berwarna hijau namun jika digunakan pada background berwarna cerah pun tetap lumayan bagus. Namun jangan lupa untuk membackup template sebelum melakukannya.
Langsung saja di bawah ini cara memasang Search Box di blog :
Buka Template sobat lanjutkan Edit HTML, kemudian beri tanda check Expand Template Widget. Lalu cari kode ]]></b:skin> dan salin kode CSS berikut di atas kode ]]></b:skin>
#searchbox{padding:0 auto;margin:3px;float:right;height:28px;text-align:center;background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #555;font-size:14px;color:#fff;width:166px;border:0;solid;#444;border-radius:2px;outline:none;
box-shadow:2px 2px 5px hsla(0,0%,100%,.5),-2px -2px 5px hsla(0,0%,0%,.5),inset 5px 5px 15px hsla(0,0%,0%,.5)
}
#searchbox:hover{background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #888;color:#000}
#searchbox:focus{background:url(http://putsavic.xtgem.com/Images/search%20Fixed.png) no-repeat 10px 9px #111;color:#000
-webkit-box-shadow: inset 0 0 20px green, 0 0 20px green;
-moz-box-shadow: inset 0 0 20px green, 0 0 20px green;
-ms-box-shadow: inset 0 0 20px green, 0 0 20px green;
-o-box-shadow: inset 0 0 20px green, 0 0 20px green;
-khtml-box-shadow: inset 0 0 20px green, 0 0 20px green;
box-shadow: inset 0 0 20px green, 0 0 20px green;
}
Setelah itu pada Bagian Elemen Laman klik tambah Gadget dan pilih HTML/javascript dan letakkan kode berikut di dalam formulirnya atau juga bisa meletakannya sesuai keinginan.
<form action='/search/' id='searchform' method='get' style='display:inline;'> <input id='searchbox' maxlength='240' name='q' value="Telusuri..." onfocus="this.value='';" /> </form>
cuman beckgraunnya aja yg berubahh warna jadi ijoo..
ReplyDeletememang begitu kah?
bikan background tapi box-shadownya. sederhana banget sih abis bingung buat nambah2 post. :cendol:
Deletewah, hampir sm kayak postingan terbaru sy hihi =D
ReplyDeletekebetulan saya lgi bingungn cari ide, ngikut mas Alam aja :p
DeleteNtu taruh kodex dmana sob? ? :D
ReplyDeletekasih tau ngga yah :p haha
Deleteitu kan ada caranya, kalo saya headernya terbagi dua jadi sebelah kanan header saya isi dengan search box :D
mantap keren kaya search yang di atas tuh, hahaaa...
ReplyDeleteini blog kok berat ya? haha
mungkin bukanya pake mozzila emg berat, soalnya saya segala macemnya pake Chrome hehe.
DeleteMantappp Chrome memang ringan :)
DeleteHehehehehehe sip sip, emang pakek chrome itu super cepat? :D
Delete@system of blog : iya bener bang :D
Delete@The 7Bloggers : belum nyampe ilmunya mas untuk menjadi seiorang blogazine :p
kreatif sob..! \o/
ReplyDeletesip2 :-d
Deletewah panjang bener :p
ReplyDeleteterima kasih sudah berkunjung, amin :)