6 Kreasi Widget Kode Kotak Pencarian Menu Search Blog

Membuat Kotak Pencarian Menu Search di Blogspot sangat mudah. Tinggal klik LayOut, "Add Gadget", dan pilih Gadget "Search Box" atau "Kotak Penelusuran".

Kreasi Widget Kode Kotak Pencarian Menu Search Blog

1. Kreasi Widget Kode Kotak Pencarian Menu Search Blog

<form action="http://namablog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

2. Kreasi Widget Kode Kotak Pencarian Menu Search Blog

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVq5yS4XmoQfRaNkXwdDFl61yd7hdg9I643Gs4kKas-_MxFNIi7_xjUMCBOgS_xaQfSO8xl5-AhajrBrDfKa26ORanrOS7Pw-ekFh6CJpIjDkYZ05eTqA6o98kCgd01rEsWiTTO1pbEkej/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;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 Here..." 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>
</span>

3. Kreasi Widget Kode Kotak Pencarian Menu Search Blog

<form action="/search" style="display:inline;" method="get"><input id="s" name="q" type="search" placeholder="Search Here...."/></form>
<style>
#s {margin: 0 auto;-webkit-appearance: none;-moz-appearance: none;padding: 12px 48px 12px 12px;
-webkit-border-radius: 200px;-moz-border-radius: 200px;border-radius: 200px;width: 300px;
height: 16px;color: #3a4449;border: none;outline: none;-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;z-index: 2;background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW45lEv4_9BJjEEbeR3lNGTobvy3PZC12mGfywV7RsfFCsYA3Sm8LR5_CNsfx1MT6f0vrUWgaz_eJlEQNm3EXoxO72SiADalUyy3cZfw8GH8oQy_XmJUR9GxBVdeqPg5gxxDRf9J5maVM/s1600/Search.png) center right no-repeat;}
#s::-webkit-input-placeholder, #s:-moz-placeholder {color: #607078;}
</style>

4. Kreasi Widget Kode Kotak Pencarian Menu Search Blog

<style type="text/css">#mediablogger-searchbox {border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaFEVW43oX62KRjSYdYMBt4uXb0bzHSDoeMZvQp9uCnjGAaW8yz6YvrdUxa6fVwbi5FrBe1MtIPglE4jKj3bCq3P3tNpTq5UFhKtyPtbSNS9CmH4vgYmUaGlBjzLLqmbymTS77sKHiv4rC/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;width: 307px;    height: 50px; disaply: block;}form#mediablogger-searchform {display: block;padding: 9px 16px;    margin: 0;}form#mediablogger-searchform #s {padding-left: 24px !important;padding: 7.5px;    margin: 0; width: 198px;font-size: 16px; font-family: georgia;font-style: italic;color: #666666;    vertical-align: top; border: none; background: transparent;}  form#mediablogger-searchform#sbutton {margin: 0;padding: 0;height: 40px; width: 74px; vertical-align: top;border: none;background: transparent;}</style><div id="mediablogger-searchbox"> <form id="mediablogger-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...";}' /></form></div>

5. Kreasi Widget Kode Kotak Pencarian Menu Search Blog

<style type="text/css">
#a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgGWSouLjzXUoMm4I3Q9ueEtMeX4n_CC-Qch1zDjN9RcSgbSsWA-AMJPGB_a25H_-sa1UwE8xDrzsHz_6xzTBUIXeKcxbA3A24JmoN2VNTz_BRSBh5wxlIB8DOBdgQfz2rIBVFKKV_O5IL/s1600/lostsector-search-box-blue.png) 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-left:20px;width: 205px;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><center><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></center>

6. Kreasi Widget Kode Kotak Pencarian Menu Search Blog

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>

Silahkan dicoba pilih menurut yang kamu suka.