Buat Blogmu Makin Keren Dengan Menambahkan Search Box Keren Ini


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


  1. Login ke Blogger Dashboard => tata Letak => Tambahkan Gadget
  2. Pilih HTML / JavaScript dari Daftar
  3. Pastekan Script yang telah Sobat pilih
  4. 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>


Gaya 2


<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
  

3 Responses to "Buat Blogmu Makin Keren Dengan Menambahkan Search Box Keren Ini"

  1. Biar bisa di taruh di sub menu header sebelah kanan bagaimana ya gan...

    ReplyDelete
  2. gampang mas, tinggal masuk ke layout/tata letak - add gadget - HTML/Java Script -paste aja script nya disana. trs tinggal simpan di header

    ReplyDelete
  3. Wah, boleh juga nih. Bikin blog tambah manis keliatannya. Hehe.

    ReplyDelete