Ditulis oleh: Ditulis pada: 7/25/2017
Ada banyak cara untuk menambahkan fitur-fitur yang menarik dan mempermudah pengunjung untuk mengeksplorasi blog atau web kita.Salah satunya yaitu menambahkan fitur kotak penelusuran atau search box. Nah kita bisa memasang search box yang menarik dengan floating search box with jquery.
Floating search box with jquery ini saya temukan ketika jalan-jalan ke dynamicdrive.com. Saya menemukan sebuah menu dengan sebuah floating search box yang cukup menarik. Dari situ kemudian saya mengambil fitur search box nya saja agar lebih mudah menambahkannya pada menu yang sudah ada di blog.
Sebagai demonya silahkan coba pada iframe jsfiddle di bawah ini.
Cukup menarik bukan? Jika ingin mencobanya silahkan ikuti langkahnya di bawah ini.
Silahkan copy kode CSS berikut ini dan simpan di atas
</head>:
<style type='text/css'>
/*<![CDATA[*/
label#search-label {
cursor: pointer;
}
label#search-label svg{
width:24px;height:24px
}
label#search-label svg path{
fill:#666
}
div#ddsearchcontainer div {
padding: 5px;
color: #efefef;
text-align:center;
}
div#ddsearchcontainer form {
display: none;
}
div#ddsearchcontainer form input[type="text"] {
width: 100%;
top: 0;
left:0;
z-index: 99;
padding: 10px;
border: none;
border-bottom: 4px solid black;
outline: none;
font-size: 3em;
background: #eee;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html.opensearch div#ddsearchcontainer {
position:fixed;
top:0;
width:100%;
height:100%;
left: 0;
opacity: 1;
-webkit-transform: scale(1) translate3d(0, 0, 0);
transform: scale(1) translate3d(0, 0, 0);
-webkit-transition: -webkit-transform .5s, opacity .5s, left 0s 0s;
transition: transform .5s, opacity .5s, left 0s 0s;
z-index:9999;
}
html.opensearch div#ddsearchcontainer .search_wrapper{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:2;
padding:10% 5% 0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html.opensearch div#ddsearchcontainer:before{
content:"";
background:rgba(0,0,0,.7);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
html.opensearch div#ddsearchcontainer form {
display: block;
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
/*]]>*/
</style>
Kemudian silahkan simpan kode html dan script berikut di atas
</body>
<div id="ddsearchcontainer">
<div class="search_wrapper">
<form class="zoomIn" id="search" action='/search' method='get'>
<input name='max-results' type='hidden' value='8'/>
<input type="text" name="q" id="search-terms" placeholder="Enter search terms..."/>
<div>Press Enter to Search</div>
</form>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var fixedsearchbox=function(e){var n,o,t,a=e(document.documentElement),r=null!=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i),s=r?"touchstart":"click",c=100,i=27,u={init:function(){n=e("#ddsearchcontainer"),o=e("#search-terms"),t=e("#search-label"),t.on(s,function(e){n.css("top","px"),a.toggleClass("opensearch"),a.hasClass("opensearch")?(n.css("zIndex",c++),o.focus()):o.blur(),e.preventDefault(),e.stopPropagation()}),o.on(s,function(e){e.stopPropagation()}),e(document).on(s+" keyup",function(e){"keyup"==e.type&&e.keyCode!=i||(a.removeClass("opensearch"),o.blur())})}};return u}(jQuery);fixedsearchbox.init();
//]]>
</script>
Kemudian yang terakhir silahkan simpan ikon search button berikut di mana pun Anda ingin menampilkannya.
<label id="search-label" title="Search">
<svg viewBox="0 0 24 24">
<path fill="#000000" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</label>
Dan pastikan Anda sudah memasang Jquery Library berapa pun versinya di blog Anda.
Selamat mencoba....