Cara menciptakan kotak search di blogspot tidaklah sulit.
kita hanya menambahkan gadget di kotak Tata letak.
Rasanya kurang lezat jikalau sebuah blog tidak mempunyai sebuah kotak pencarian.
sehingga pengunjung blog hanya bersinggah sebentar kemudian pergi. T-T
Baiklah dibawah ini ada 5 style kotak pencarian ..
silahkan klik LIHAT HASIL untuk melihat stylenya.
Caranya :
- Masuk dasboard blogger tentunya.
- pilih TATA LETAK.
- lalu klik Add Gadget. terserah anda ingin meletakkannya dimana.
- kemudian pilih HTML/JAVASCRIPT.
- JUDUL biarkan kosong.
- isi konten dengan kode-kode di bawah ini.
_______________________________________________________
<span style="float: left;"> <style type="text/css">
#a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKsKWmQz2cP32JDspm0awKcYgdrFvEgLg2fWByn17kH1WIp2NYRMEPmOy4BWjL9rqzDj0QIj7iDg-RRAKiLjgLc2mMTvZIo4PTA3mns8O5UkMWSAvGVYSCh61ftgXUcgwhTO3_QRByejWu/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 action="/search" id="a-searchform" method="get">
<input id="a" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...")
{this.value = ""}" type="text" value="Search Here..." />
<input id="abutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div> </span>
#a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKsKWmQz2cP32JDspm0awKcYgdrFvEgLg2fWByn17kH1WIp2NYRMEPmOy4BWjL9rqzDj0QIj7iDg-RRAKiLjgLc2mMTvZIo4PTA3mns8O5UkMWSAvGVYSCh61ftgXUcgwhTO3_QRByejWu/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 action="/search" id="a-searchform" method="get">
<input id="a" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...")
{this.value = ""}" type="text" value="Search Here..." />
<input id="abutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div> </span>
<style type="text/css"> #a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3fkDtYZjAtz01HxHJ894BUppeDOLg9kvPaJTvasts_kveBKXq7Z-K238dQ92udiF3r0pzkckyl-jfEnxIGzC-6sD2gYBJPaZmzjO3KLigBnwgCLmj63mT0dMTiJ9e13DPYMiQtK-Y01c/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>
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs3fkDtYZjAtz01HxHJ894BUppeDOLg9kvPaJTvasts_kveBKXq7Z-K238dQ92udiF3r0pzkckyl-jfEnxIGzC-6sD2gYBJPaZmzjO3KLigBnwgCLmj63mT0dMTiJ9e13DPYMiQtK-Y01c/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>
<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/AVvXsEhhzKkD6JS2H4bA-gmULn2nmOtVt7BRP44RXYFp_Knx9nQqY9ytblRzsiawquIvCxncPwYnArPGACsJUiFih9oh4JaOQnuojPEHKU3BJhSPOYcnHw03TpE1hJBfQlgYM5CD8yM9KpB-MsU/s1600/Search.png)
center right no-repeat; }
#s::-webkit-input-placeholder,
#s:-moz-placeholder { color: #607078; }
</style>
<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/AVvXsEhhzKkD6JS2H4bA-gmULn2nmOtVt7BRP44RXYFp_Knx9nQqY9ytblRzsiawquIvCxncPwYnArPGACsJUiFih9oh4JaOQnuojPEHKU3BJhSPOYcnHw03TpE1hJBfQlgYM5CD8yM9KpB-MsU/s1600/Search.png)
center right no-repeat; }
#s::-webkit-input-placeholder,
#s:-moz-placeholder { color: #607078; }
</style>
<style type="text/css">#mediablogger-searchbox {
border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC_ScVtz7ri2BN25REPuFYHocKY5fbRAL_rwOslasLcFwsI5o2X8yBtmzBfxl5ppYxb8yACTWacxT43dzJdqZk3cu0zBviYOtvL9a9VUHLMN28yn2gtAS_h__sgIfIWTmUAUgQ9nUIFn0Q/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 action="/search" id="mediablogger-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "")
{this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
</form> </div>
border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC_ScVtz7ri2BN25REPuFYHocKY5fbRAL_rwOslasLcFwsI5o2X8yBtmzBfxl5ppYxb8yACTWacxT43dzJdqZk3cu0zBviYOtvL9a9VUHLMN28yn2gtAS_h__sgIfIWTmUAUgQ9nUIFn0Q/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 action="/search" id="mediablogger-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "")
{this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
</form> </div>
<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>
<input class="textinput" name="q" size="30" type="text"/>
<input value="search" class="buttonsubmit" name="submit" type="submit"/>
</form>
Sekiann......
Sumber http://tiksatuweru.blogspot.com
Mari berteman dengan saya
Follow my Instagram _yudha58Related Posts :
√ Cara Menciptakan Gambar Sejajar Dua-Tiga Kolom Di Postingan Blog
√ Cara Gampang Menciptakan Drop Caps Tanpa Edit Html [Huruf Besar
Diawal Kalimat]
√ Cara Memilih Jumlah Judul Postingan Di Halaman Hasil Pencarian
[Search Page Result]
√ Cara Menciptakan Link Media Umum Di Blog Memakai Font Awesome
√ Cara Menciptakan Formulir Kontak Keren Di Blog
0 Response to "√ Cara Menciptakan Kotak Pencarian Di Blog Tanpa Edit Html [5 Gaya]"
Posting Komentar