Membuat Kotak Pencarian keren di blog

Kotak pencarian atau Search box sangatlah penting dalam suatu blog untuk mempermudah pembaca dalam mencari artikel tertentu dalam blog kita. Setelah googling, saya menemukan kotak pencarian yang keren seperti gambar ini....
Jika sobat tertarik untuk membuat kotak pencarian seperti ini, ikutilah turtorial di bawah ini...
1. Log in ke blog sobat
2. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript dan pastekan ssalah satu script di bawah ini.

Kotak Search 1

<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_n8fpNly0BQ1mceVILIFRrEKaY0PJ9PyAQqE-WDTqyp-Sdh15TmA2C_P4a5nn918-vND-F3ftRvrwJA9pt38jZ9mlnYrjGVEJKy7IeAkR3J9a7t9lGwWk501rXNadye4CsoPzNnw7Jver/) 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> <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>

Kotak Search 2

<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJE5hpIdwfzmi5Xv7Mvy4oswMRagszq2AGIecKskZ8IgmvZGqiqqO47yBtIRUY-M0pQv1b-G3NYKqr2GwM2vCquPm63T_4Et8LkIR7pmCw37q04WLXpp48sCWVBJtNZrrDEXy4fR9h97pr/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get">    <input type="text" id="b" 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="bbutton" /></form></div>

Kotak Search 3

<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXht_ifPSEqDe86zlz24JEP3tQDNRfOJrWp8lXXjY_9JRunQvQ1VTAalgt2g2ezFatyEj-mXi8hhe8yqAq3xrw_1y_jQF-Q3gXJZlT0_yg_vCmw1Drrodfqg3_mFBI77V-HYkASaXdBJWZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get">    <input type="text" id="c" 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="cbutton" /></form></div>

Kotak Search 4

<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXjTpdBkh9qvtfzd2Z1E_zHWJIdbB2KHqY5-wUOovAd9bJdR2vILYpmZV8tKDiRT6scqzMsrRzmH2ZXClxs-seXaCviNoWOv4XiGKWIXLWYJNeoq-Wt1dRikDTInWCM61JcSBMQTK2nVbr/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get">    <input type="text" id="d" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>

Kotak Search 5

<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFyPSNbXlKUsnY0hgcTWy8fis4NAURZXXs62byTV5rIVhfdxwPk_YBN39bREhlcz9jRXrK9rE3PxVMEfZheusDnRKUTxJ71zrQ-qB1ooGMAHPfYBAG55Qg3Tc0_AlrTTtWNSZ1oOWPcRvx/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get">    <input type="text" id="e" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>

Kotak Search 6

<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWBqu0v6cmrHkf2FuXXwIa7eoZgpRVxhaspTySW0d0EbDDNcsdIoDP3JIGgad4f5-T0M1ry1vavX0BPVVNG5M2Zr1o4D7tXY4a2sx4LbVbujAstWM0RuaTU7Qpy1Sfw2dyb7aYOZVHNCV/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get">    <input type="text" id="f" name="q" value=""/>  <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>

<form id="searchform" action="http://rexroom.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text" /> <input id="searchsubmit" value="Pencarian" type="submit" /> </form>

cari disini

<p align="left">
<form id="searchthis" action="http://rexroom.blogspot.com/search" style="display:inline;" method="get">
<strong>cari disini<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Pencarian" type="submit"/>

Keterangan : 
Warna merah adalah Url blog sobat
Warna biru adalah Judul tombol 

3. Setelah itu Save dan lihat hasilnya...

Related Post:

aksesoris blog

• Cara membuat Tombol Download animasi di blog
• cara Merubah tampilan youtube di blog /web
• Cara pasang TV online di blog sendiri terbaru 2013
• Cara Membuat Generator website speed test
• Membuat papan Klasmen sepakbola berbagai liga
• cara membuat / daftar w3 directory
• Modifikasi gadget Pengikut/Follower pada blog
• membuat tombol follow blog di widget
• membuat tombol google facebook pada widget
• membuat tombol like facebook di blog
• membuat subscribe keren di blog
• membuat pencarian atau search pada blogger
• Membuat 'Langganan Lewat Email'
• Cara membuat widget reader di blog
• Cara memasang widget rss feeds di blog
• Cara mengetahui identitas pengunjung dengan widget / gadget
• Cara mengganti cursor standart pada blog
• membuat auto backlink
• Cara menambah Jam pada Blog
• Menambah widget Kalender di blog
• membuat kotak fanpage tersembunyi
• Cara Menambah Alexa rank ke blog
• Cara menambah page rank di blog
• music swf tanpa buffering di blog