Search Box atau kotak pencarian memiliki fungsi untuk membantu mempermudah para pembaca dalam mencari atau menelusuri artikel atau informasi yang mereka cari dalam blog.
Search Box merupakan sebuah tools yang penting dalam sebuah blog. Search Box bisa didapat dengan gratis karena memang sudah disediakan oleh Blogger.
Tapi bagi Sobat yang mau tampilan Search Box-nya lain dari yang lain, lebih ramping, keren, dan beraneka warna silahkan bisa menggunakan Script di bawah ini. Ada beberapa warna Search Box yang bisa Sobat gunakan.
Menambahkan Search Box Keren di Blog
- Login ke Blogger Dashboard => tata Letak => Tambahkan Gadget
- Pilih HTML / JavaScript dari Daftar
- Pastekan Script yang telah Sobat pilih
- Simpan
Gaya 1
<style type="text/css">#abt-searchbox{border-radius:5px;background:URL(http://2.bp.blogspot.com/-vGjST2sX6Ts/T88uy-eRYUI/AAAAAAAAAog/xhJ2A0nGnpw/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#abt-searchform{display: block;padding: 10px 12px;margin:0;}form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#abt-searchform#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}</style><div id="abt-searchbox"> <form id="abt-searchform" action="/search" method="get"> <input type="text" id="s" 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="sbutton" /></form></div>
<style type="text/css">#abt-searchbox{border-radius:5px;background:URL(http://4.bp.blogspot.com/-hxd1468RbE4/T88u0xTfk1I/AAAAAAAAApQ/BZ1WB9VG_3g/s400/whitez%2Bby%2Babt.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#abt-searchform{display: block;padding: 10px 12px;margin:0;}form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#abt-searchform#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}</style><div id="abt-searchbox"> <form id="abt-searchform" action="/search" method="get"> <input type="text" id="s" 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="sbutton" /></form></div>Gaya 3
<style type="text/css">#abt-searchbox{border-radius:5px;background:URL(http://4.bp.blogspot.com/-Z_Bf8C64sWs/T88uy_rLu3I/AAAAAAAAAow/EcYyd6sKjxA/s400/bluez%2Bby%2Ballbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#abt-searchform{display: block;padding: 10px 12px;margin:0;}form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#abt-searchform#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}</style><div id="abt-searchbox"> <form id="abt-searchform" action="/search" method="get"> <input type="text" id="s" 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="sbutton" /></form> </div>Gaya 4
<style type="text/css">#abt-searchbox{border-radius:5px;background:URL(http://4.bp.blogspot.com/-T2F6d51MVw8/T88u0v_kIqI/AAAAAAAAApE/pB5bbugoVoM/s400/transparent%2Bby%2Ballbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#abt-searchform{display: block;padding: 10px 12px;margin:0;}form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#abt-searchform#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}</style><div id="abt-searchbox"> <form id="abt-searchform" action="/search" method="get"> <input type="text" id="s" 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="sbutton" /></form> </div>Gaya 5
<style type="text/css">#abt-searchbox{border-radius:5px;background:URL(http://1.bp.blogspot.com/-D98wjamWcwk/T88u0dnSPuI/AAAAAAAAAo4/U4Oy3x-zhRg/s400/pinkz.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}form#abt-searchform{display: block;padding: 10px 12px;margin:0;}form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}form#abt-searchform#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}</style><div id="abt-searchbox"> <form id="abt-searchform" action="/search" method="get"> <input type="text" id="s" 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="sbutton" /></form></div>
OK, Sob. Itu script Search Box yang bisa saya share. Semoga blog kalian makin keren dan sukses. Tetap semangat berbagi manfaat. Salam
Biar bisa di taruh di sub menu header sebelah kanan bagaimana ya gan...
ReplyDeletegampang mas, tinggal masuk ke layout/tata letak - add gadget - HTML/Java Script -paste aja script nya disana. trs tinggal simpan di header
ReplyDeleteWah, boleh juga nih. Bikin blog tambah manis keliatannya. Hehe.
ReplyDelete