√ Cara Menciptakan Kotak Pencarian Di Blog Tanpa Edit Html [5 Gaya]

Cara menciptakan kotak search di blogspot tidaklah sulit.
kita hanya menambahkan gadget di kotak Tata letak.
Lalu menambahkan instruksi j4vascript .

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 == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;)
{this.value = &quot;&quot;}" type="text" value="Search Here..." />
<input id="abutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div> </span>

Lihat Hasil

<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>

Lihat Hasil

<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>

Lihat Hasil

<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 == &quot;&quot;)
{this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
</form> </div>

Lihat Hasil

<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>

Lihat Hasil

Sekiann......


Sumber http://tiksatuweru.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: