Cara Membuat Kotak Pencarian Keren Di Blog

 

Untuk memudahkan para pengunjung blog, 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(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png) 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(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) 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(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.png) 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(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png) 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(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.png) 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




Artikel Menarik :

5 komentar:

WeShare mengatakan...

Mantap..Udah ane pasang di blog..
Terimakasih untuk tutorialnya

Wisnu Friskian mengatakan...

oke sob, sama sama..

Deni mengatakan...

mantap sob, saya udah coba, thanks...

Wisnu Friskian mengatakan...

ok sob.. :)

Unknown mengatakan...

postingan yang bagus sob :D kunjungan balik nya ya www.naufalthedarkness.blogspot.com

↓↓↓ Expresikan Komentar Anda ↓↓↓
→:10 →:11 →:12 →:13 →:14 →:15 →:16
→:17 →:18 →:19 →:20 →:21 →:22 →:23
→:24 →:25 →:26 →:27 →:28 →:29 →:30
→:31 →:32 →:33 →:34 →:35 →:36 →:37 →:38 →:39

Posting Komentar

Blog ini DOFOLLOW
Silahkan anda berkomentar dengan sopan
Tolong jangan membuat spam atau sejenisnya.
Terima kasih.

© 2011 copyright wisnu-friskian.blogspot.com Template by Kendhin edited by Wisnu Friskian Adhi
Download Software, Tips N Trik, PES dan Patch | Wisnu Friskian Adhi
Cara Membuat Kotak Pencarian Keren Di Blog