SELAMAT DATANG DI GOGONITY BLOG SEMOGA ARTIKEL-ARTIKEL DI DALAM BLOG INI BISA BERGUNA BAGI PARA PENGUNJUNG

Search Box / Kotak Pencarian yang keren untuk Blogspot

Search Box / Kotak Pencarian berfungsi untuk mempermudah pengunjung mencari artikel-artikel di dalam blog itu sendiri. Tutorial tentang Search Box / Kotak Pencarian pastinya sudah banyak yang tahu. Sekedar untuk memperlengkap artikel Tutorial Blog Gogonity Blog ingin berbagi dengan sobat-sobat semua tentang Search Box / Kotak Pencarian yang keren untuk Blogspot. 

Lansung aja ke TKP dan ikuti langkah-langkah membuat Search Box / Kotak Pencarian yang keren untuk Blogspot di bawah ini :

  1. Login ke akun Blogger sobat
  2. Masuk ke Rancangan/Design
  3. Pilih Page Element/Elemen Laman
  4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini :

Style 1
<style type="text/css">
#w2b-searchbox{background:url(http://3.bp.blogspot.com/-6qJ3K_tmQ9k/TlcWJNAlejI/AAAAAAAAA-Y/QKGB-vIam_w/s320/kode-blogger_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>


Style 2
<style type="text/css">
#w2b-searchbox{background:url(http://1.bp.blogspot.com/-0BBC_Sxrb6k/TlcWJRLmfJI/AAAAAAAAA-g/2E4u2Kbb1K0/s1600/kode-blogger_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>


Style 3
<style type="text/css">
#w2b-searchbox{background:url(http://4.bp.blogspot.com/-Z73Tww42VDI/TlcWJ_LrMQI/AAAAAAAAA-o/Djih0jTihg4/s1600/kode-blogger_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>

Style 4
<style type="text/css">
#w2b-searchbox{background:url(http://1.bp.blogspot.com/-f2D4_8HmVDw/TlcWKCfDQwI/AAAAAAAAA-w/V6RPSHyHROc/s1600/kode-blogger_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>

Style 5
<style type="text/css">
#w2b-searchbox{background:url(http://3.bp.blogspot.com/-dIFRxQlgo-U/TlcWKLZNrfI/AAAAAAAAA-4/lvSOBOBdzHw/s1600/kode-blogger_searchbox5.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>

Style 6
<style type="text/css">
#w2b-searchbox{background:url(http://1.bp.blogspot.com/-SLuIDQ0kDB8/TlcW1voR0jI/AAAAAAAAA_A/FNDCIKqyzmk/s1600/kode-blogger_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>

Semoga bermanfaat...



Article :


Preview on Feedage: gogonity-blog Add to My Yahoo! Gogonity Blog Add to Google! Gogonity Blog Add to AOL! Gogonity Blog
Add to MSN Gogonity Blog Subscribe in NewsGator Online Gogonity Blog Add to Netvibes Gogonity Blog Subscribe in Pakeflakes Gogonity Blog
Subscribe in Bloglines Gogonity Blog Add to Alesti RSS Reader Gogonity Blog Add to Feedage.com Groups Gogonity Blog Add to Windows Live Gogonity Blog
iPing-it Gogonity Blog Add to Feedage RSS Alerts Gogonity Blog Add To Fwicki Gogonity Blog Add to Spoken to You Gogonity Blog

Share |

Baca juga artikel yang lain :

Bagi pengguna facebook komentar disini

1 comments:

FicarDean said...

Wuihh...Keren gan..
Tapi ane bingung mau ditaruh dmana...
Kasih saran dong gan..
Thanks

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Terima kasih atas kunjungannya.
Dapatkan backlink gratis dari blog DOFOLLOW ini dengan berkomentar! dan gunakan kode smiley diatas untuk mengexpresikan senyum anda. contoh :))
Maaf SPAM akan Dihapus
Contoh SPAM : Mengetik Link Pada Komentar, Komentar tidak sesuai Isi Artikel,No Porno, No Sara.

Gogonity Blog © 2010 Template Modified by:
IroelSt
Protected by Copyscape Duplicate Content Finder DMCA.com