Select Menu

Combined Post

Mag Posts

Laman

Gambar tema oleh konradlew. Diberdayakan oleh Blogger.




Combined Posts 2

Mag Post 2

2 Column Post

Simple Post

Simple Post 2

New Carousel

Video Posts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.



Memuat...
Halo sobat blogger, kali ini saya akan share Tutorial Membuat Search Box Simple Diblog. Sebenarnya saya sudah memasang widget ini ada blg saya Box Movies 99. Desainnya ini dibuat oleh Design3edge. Ok langsung aja keintinya:
  • Login ke blogger
  • Setelah anda login ke blogger, masuk ke tab Tata Letak.
  • Klik Add Gadget > HTML/Javascript
  • Kemudian pastekan kode dibawah ini dan pilih style yang anda inginkan.

STYLE 1

<style type="text/css">#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitgHcteUrC9-fNNEdS7LpNZXKfxgsYos0jfPkmcB1X4xvjjrHNBON9gI1BiY84BBiL5t5k_MRfnegba8-z10o-JgXcoT6u0ExM1BPLkucEhytjcnWhm2wMcgxNuL0qzxQNhI3wPFheBkOW/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh22iE6UMXeVUrvTg-PX6WV6wdXFvrmX8FNFaylEWUxteAyhke8mH-5GfrGEN8VthxKHDHLsyioq4Y2lL_FA_ykm6Mr6LBFYCE17uSGPt0k9CsHZ5SK4-JJIQBYaQqThmm3clwx4LsGjW5Q/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgcOK2_lURikRxZNEXjWhniwMVKGTvoxx52J8idT7-V_5ilZNtE7BOumZ73Y2SNX95JgwdtKD8qno7dwq3MY20VMzgg1aqpwNsDCWG7R-sclIzkrDhre421Axql_y2UZ5bzG_HtKGigCtk/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7RgyS422yJr52KDPRWFLH3FXznCsGL1K_mcNGgGEVpGMQboInBI1pwPBhk1Qd3L9R_wWTeTeiPR17oYbbcj_OlW8ytV-YSy2XIx3E1RwqjQn_9lqc90IOdCluZ6JrTy6PiDG0GRb7VZuc/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-1bINb-G6_ZMEOp_a48ev0JrNTGN6WAMo7-0AHELmWpPqMvDN8aGf0h_mtcnIyHJ5ga92Nc9uZCyedMa3ZfNTKg8tMPSUH8wrJu6Jy8W_KJvJKZvg_TKbFDDoaC6pqrPc9rIf7oU7zwxo/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirBKePm0D-vcKMwdFdlIkHTqYueUai3ZahhrjZIvmk-IXmJchRZWIvZSp_D2EW7XSP0jSLpXxu1l9urOQSz_8O8u3OS4XBstGHFCS7tsYxitSXFlz4V6kXFobVqpQBLPxz11u-yKL42afN/) 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> 


  • Simpan dan lihat hasilnya.