Skip to content Skip to sidebar Skip to footer
Home / Desain Blog

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

Konten [Tampil]


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

<style type="text/css"> #a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9sQ_WphL5l-JJJ5JgDQ36kMf7A3Bsduvp7ygt5AauYoWGhqF6Kjslyaoryg9bprd7H3eITRnbfExuMDBxcqxH3YwQPo4KXc2v-8MpbjsZl_4yOuWevas_jmohvF1ZBiWwg7Cqd9b24ccn/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/AVvXsEhSNoi4JxDlUmX31iRg4PpJgZIRbDlSwekhVuuRhcb0eIcdoXJ1yFBnAS-BuKZXybuKDdXE5rcSx1AtYGGd-OQQ8D6eX5-B-Uy6MzIbeq-1PbLVlXXmhWQiaa6_CX4oZZPgRO07SvCSe_8/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/AVvXsEhZMKHu3uaW4K2V6zDxyCPgWHaPJfAuwLRQLmSViLgy165A7cqaZN1m6Spw0cPsvIlHmwXv3vr9CNGURJpRkQG0cATs18ModOHK7mkR8ahBI4YxaZN-NSsxWfC3F0Xpx4ZjKu8Tf0a9WtRY/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>


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


Sekiann......


Sumber http://tiksatuweru.blogspot.com