Cara Membuat Kotak Pencarian Keren Di Blog

Udah larut malam gini mata belum juga mengantuk. Akhirnya saya putuskan buat posting Cara Membuat kotak Pencarian Keren Di blog. Dari pada nggak punya kerjaan ckckckckck..! Oke langsung aja Sobat blogers. I-----:>>>

Untuk memudahkan para pengunjung blog Raja Dihati, kita dapat memasang kotak pencarian di blog supaya pengunjung dapat dengan cepat menemukan artikel yang dicarinya. Biasanya kotak pencarian dengan kode dasar kurang menarik jika dilihat, untuk itu kita perlu menghias kotak pencarian supaya terlihat lebih menarik.

Cara membuat kotak pencarian keren :

a. Login ke blog anda

b. Klik Rancangan, pilih Elemen Laman

c. Klik Tambah Gadget

d. Pilih HTML/JavaScript

e. Copy dan pastekan kode di bawah ini :    Silakan pilih jenis kotak pencarian yang anda inginkan

    Jenis Pertama :

     Kode :

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8oGP6cRZdA-2feEvQ-g2JdC4VqpVTcF-03fYURRv1GKaU0p3dMtpQEfdBxqmlJNaONRenWOyp7NR2TuYoAoV9gwHPiTEQPHgG54McZpWEf5rHaJan7iZiAgHoky10TZFg3t20E3Wo7c0R/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

    Jenis Kedua :

     Kode :

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlleGFxVpDNelOnjCBsUbIfvhJIZIdVTSMmCLEFpL1BysqSvv82eh2ZWaGV1StB8bBcgLNtkYZBX8xSynTH1ru6Y4ysxneZncBag1bp5DJk4nACmo1EbkS3NuJRIxLNc_C9fL7oX9Fn7jw/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-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>

    Jenis Ketiga :

     Kode :

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpMFEGTdEW0t-XPqLk6hEFrBjIPGRd5q-vLPhLv1QSLW0s93576LVlYMtN7MyBTwe6HyWKYuhR2RC6oUW8UbY5LB1KFau0AL7MIWRPoiVTuET71YIkc_U_OBA-GN534zFkherBQYs-600S/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-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>

    Jenis Keempat :

     Kode :

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1RqOWBWv-YkMmtBlomcM3VEEuDEBewUyOzvZB4oq1CoPr3-bBAp5pLrhi3ACckCuJenEeIe0rKpT1eu-JSvldcSA4d1Op35aTqKIIx2gmB9zXXaGpVFRMlomw9fskgsXuYxiaI22Ys-DK/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

    Jenis Kelima :

     Kode :

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhXu9cEBi7o0Me5UNik0yYL_DfQdGt_2Vmzy1rqTq_xr3TwJdTQnGB9kQXEOU0Q5l4QQi_l5SWE3hW6-mkSDQSomIRxPBE1SIePpgh6euhSeIcZvafeHfZ87ZQJO7eMybePOdpyPcE1sjJ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-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>

f. Klik Simpan

g. Selesai

h. Lihat blog untuk melihat hasilnya
i. JANGAN LUPA KOMENTARNYA BILA ADA KESALAHAN

..::Enjoy From My Site::..