Search Box atau biasa juga disebut sebagai kotak pencari
adalah sebuah media atau alat yang bisa digunakan untuk mencari dan
menemukan sesuatu sesuai dengan kata kunci yang diketikkan kedalam form.
Search box mempunyai peranan yang sangat vital bagi blog, karena jika
seorang pengunjung ingin mencari sesuatu, misalnya mencari artikel yang
berhungan dengan widget, maka pengunjung cukup memasukkan keyword
kedalam form dan menekan tombol enter atau search untuk menemukan
postingan yang berhubungan dengan keyword yang dimasukkan akan
ditampilkan.
Demo By Image
Cara Memasang Kotak Kostum Pencari Pada Blog
- Terlebih dahulu login ke Blogger
- Pada Dashboard, pilih Tata Letak » Add Gadget » HTML/JavaScript
- Langkah selanjutnya, copy salah satu kode yang saya sediakan di bawah kemudian pastekan ke dalam form HTML/JavaScript Tersebut
- Lanjutkan dengan menekan tombol Simpan.
Skins Search Box Widget
SKIN 01
KODE
--------------------------------------------------------------------------------------------------------------------------<style type="text/css">#a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ap41HbBgP9CsKvJugdYkOKzdTKfFtWXHe9MRavLm6suUPkHsmSJQhab8JRQW3i2yNycu-fuaZ5VesxAuVX5NmMNwsNBc-mbbDwCPPbmFiuPxYxHBc0fni-1IDo8nPVbNAQVxh2VSOizI/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#a-searchform{display: block;padding: 10px 12px;margin:0;}form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}</style><center><div id="a-searchbox"><form id="a-searchform" action="/search" method="get"><input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/><input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /></form></div></center>
SKIN 02
KODE
<style type="text/css">---------------------------------------------------------------------------------------------------------------------
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonK7G8txnWdPQqLAIkftoIG2Z-5T_9289xMMN3BhPMXTkemnhYW7DouVG39eTEMKBMjKFqrYC36_wtslIlSW5B4dDvA7G7-tjpKRGNf-dDovRtURfxscuTMrFK3uKVyQrFOpJMd3sAVZL/s1600/lostsector-search-box-darkgrey.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
SKIN 03
KODE
-----------------------------------------------------------------------------------------------------------
<style type="text/css">------------------------------------------------------------------------------------------------------------------------
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLA0O4DSnr4UxmJX4yHHU8NUDyz7iAK9fIHri2B-btH4GibWs5OlHZeBnyKbg53rRIc7DXoG1mp54AeTxzPYXnB3ZLngU-Jys4e26KAEMzOacFw8xQsKyI_wqKKR6fRfhrcEE9uD5VohC/s1600/lostsector-search-box-gray.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
SKIN 04
KODE
-----------------------------------------------------------------------------------------------------------
<style type="text/css">------------------------------------------------------------------------------------------------------------------------
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwkK_V8Q6ILghDlBDzisa1FT-e_A9SoX9mVFM7PEFcwvuWSJZo32JksUCkDGOko2kc8saxaHB92_d4K36ZgyyjSAhlnish96DD4bI8iKJgqUYyW8lajcf1wHBBseMJ7PpCFq5Q0eMtCHkq/s1600/lostsector-search-box-black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
SKIN 05
KODE
<style type="text/css">-------------------------------------------------------------------------------------------------------------------------
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNzaFtIyHRIHetrUeIbHEU9L3V7l-rcr-HNe9R12f5vqdvXdrgNZpzcsHQMFot4IrZxxOGQmXfGL8VFYO04AvsUT7VUWiZyqXMh9pwEbhgmzPPWfs_PXJUu1WEs32iyHqjDn7z2Ej41Ly9/s1600/lostsector-search-box-red.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
SKIN 06
KODE
<style type="text/css">------------------------------------------------------------------------------------------------------------------------
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMVyhndm8oF0LOcc2ixLuvrMxjBRpf_70y9iwkSPzGOHPE9xe0l78zOkQrzBEBbh4hlUapKnWugtm4WsbEXurMfrr3QWJ7YWirsUZhHREhMx9SqryH2VYo0FSYvQ_OUhdu6iiHoCioYSAe/s1600/lostsector-search-box-yellow.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>
---------
Sumber : http://www.lost-sector.net/2013/01/six-style-search-box-for-blogger.html
0 komentar:
Posting Komentar