Floating Search Box With Jquery

Ada banyak cara untuk menambahkan fitur-fitur yang menarik dan mempermudah pengunjung untuk mengeksplorasi blog atau web kita.

Salah satunya adalah menambahkan fitur kotak penelusuran atau search box. Nah kita dapat memasang search box yang menarik dengan floating search box with jquery.

Floating search box with jquery ini aku temukan saat jalan-jalan ke dynamicdrive.com. Saya menemukan sebuah sajian dengan sebuah floating search box yang cukup menarik. Dari situ lalu aku mengambil fitur search box nya saja supaya lebih gampang menambahkannya pada sajian 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 aba-aba 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 aba-aba 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="Floating Search Box With Jquery">
   <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....
Sumber https://www.kompiajaib.com/

Share this post