Kotak pencarian , mesin pencari, search box atau search engine,, adalah widget yang yang bisa menelusuri konten blog atau artikel blog. Google juga menyediakan widget pencarian ini, bahkan kotak pencarian dari google bisa menelusuri isi blog kita dan juga web-web lainnya.
Namun karena tampilannya yang cenderung simpel dan loading cenderung sedikit lama,, hal tersebut di karenakan adanya script yang di loading dari GSE, jadi GSE (google search engine) dari Google ini kayaknya jarang di pakai pada sebuah situs atau blog.
Modifikasi kotak pencarian, Custom search box,
ini adalah Search Engine Sederhana dengan sedikit perbaikan tampilan
menggunakan CSS (cascading stylesheet), Namun Serach Engine ini hanya
bisa menelusuri isi konten dalam blog kita saja, tidak seperti search
engine dari GSE (google search engineGoogleSearch
Read GSE Search Widget) yang bisa menelusuri isi blog kita dan web/situs lainnya berdasarkan keyword yang kita ketikan.
Read GSE Search Widget) yang bisa menelusuri isi blog kita dan web/situs lainnya berdasarkan keyword yang kita ketikan.
Dan untuk demonya bisa di coba diatas,,, kotak pencarian sederhana ini dilengkapi dengan TOOLTIP sedehana juga. Apabila sobat ada yang berkenan mau mencoba search engine dengan tooltip ini, silahkan langsung di copy kode-kodenya di bawah ini.
HTML
<div id="search">
<form action="/search/" id="searchform" method="get">
<input id="searchbox" maxlength="255" name="q" onblur="if (this.value == "") {this.value = "✔ search something...";}" onfocus="if (this.value == "✔ search something...") {this.value = ""}" type="text" value="✔ search something..." /><a class="tooltip"><input id="cari" type="submit" value=""/><span><p>
Information</p>
<em>U</em> can find Something</span></a></form>
</div>
CSS
/*tooltip*/
.tooltip{position: relative;
}
.tooltip span {position:absolute;top:-200px;right:0;font:11px Courier New,Courier,monospace;color:#fff;text-align:center;padding:10px;border-radius:10px;-moz-box-shadow:0px 0px 9px #000;-webkit-box-shadow: 0px 0px 9px #000;box-shadow:0px 0px 9px #000;border:1px solid #fff;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi73WPU1hyphenhyphenYbcpb_C7v5YkN6_V5yo-N6gc0U-buDS_Gxh_vAZ94hvW-B4InW8q-IpyU-PJA8-5dvy0zyCkC0FOxuFJwpkWvevCkvOz1mQmi8FCCAS31TN4lLP07Pgfel5GZyvel6Bo_PIw/s48/Info.png) no-repeat top left;-webkit-transition:all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition:all 1s ease-in-out;opacity:0;
}
.tooltip:hover span {position:absolute;top:35px;right:0;opacity:0.9;
}
.tooltip p {font:bold 20px/35px Courier New,Courier,monospace;margin:0 0 0 45px;
}
.tooltip em {font:bold 20px/20px Courier New,Courier,monospace;
}
/*pencarian*/
form{display:inline-block;background:#333;border-radius:5px;border:1px solid #fff;box-shadow:0 0 5px #000;padding:2px;height:30px;
}
#search input[type="text"] {background:#ddd;font:12px Arial,Helvetica,Sans-serif;font-style:italic;color:#000;text-align:left;width:160px;height:28px;padding:0 5px 0 5px;color:#000;float:left;border:1px solid #fff;box-shadow:inset 0 0 5px #000;-webkit-transition:all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition:all 1s ease-in-out;border-radius:50px;
}
#search input[type="text"]:hover {width:200px;background:#fc5;border-radius:3px;border:1px solid #ddd;box-shadow:inset 0 0 5px #000;font-size:15px;text-align:right;color:#fff;text-shadow: -1px -2px 1px #000;
}
#search input[type="text"]:focus {width:250px;background:#fff;border-radius:50px;border:1px solid #ddd;box-shadow:inset 0 0 10px #000;
}
#cari{margin-left:4px;width:35px;height:30px;border-radius:3px;border:1px solid #fff;box-shadow:0 0 2px #333;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiokF8wVBHhnu2SRVRMVjJyHSGpizYBMmaBaGeamOAkK4o-KfYuLVV0IEv4_WRtPvTBHbY5UEdyDqMmsUWb06EXTMPb-MJCLSH9AYj-KouXS1BNwHJbcsCc4B7_0wSOkiBxIUxd1O7FdhyB/s400/search.png) no-repeat center;cursor:pointer;-webkit-transition:all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition:all 1s ease-in-out;z-index:10;
}
#cari:hover{background:#fc0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiokF8wVBHhnu2SRVRMVjJyHSGpizYBMmaBaGeamOAkK4o-KfYuLVV0IEv4_WRtPvTBHbY5UEdyDqMmsUWb06EXTMPb-MJCLSH9AYj-KouXS1BNwHJbcsCc4B7_0wSOkiBxIUxd1O7FdhyB/s400/search.png) no-repeat center;width:45px;height:40px;border:1px solid #fff;box-shadow:0 0 5px #000,inset 0 0 5px #000;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);
}
Posting Komentar