Memasang Floating Search Box With Jquery for Blogspot

Ada banyak cara untuk memperindah blog biar pengunjung dapat mampu mengexplore lebih dalam mengenai isi dari blog yang kita kelola dan sajikan salah satunya yaitu disediakannya Kotak Pencarian pada menu navigasi tambahanan yang umumnya di pasang pada Header.

Dipostingan kali ini kita akan membahas mengenai seputar Kotak Pencarian atau Search Box yang menggunakan Trik atau metode Floating Search Box menggunakan instruksi Jquery. Sehingga tampilannya akan lebih menarik dan simple bahkan blog akan terlihat lebih Profesional dimata pengunjung. Kode Floating Search Box ini aku temukan di dynamicdrive.com ketika berkunjung melihat ada tampilan menarik di search box tersebut yang pada kesannya menerima pandangan gres untuk membuat Postingan ini.

Langsung saja bagi sahabat yang mau mencobanya mari kita simak langkah penerapannya berikut ini Cara Memasang Floating Search Box With Jquery for Blogspot.

Langkah Pertama

Silahkan pasang instruksi Jquery Library di dalam template blog berapa pun versinya, kalau sudah terpasang lewati langkah ini.

Langkah Ke Dua

Silahkan salin instruksi CSS dibawah ini lalu letakkan di atas instruksi </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>

Langkah Ke Tiga
Silahkan salin instruksi HTML dibawah ini lalu letakkan di atas instruksi </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>

Langkah Ke Empat
Silahkan salin instruksi script dibawah ini yang berfungsi untuk menampilkan Ikon search button, silahkan letakkan bebas diposisi mana ingin ditampilkan, umumnya berada di Header.

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

Demo

Perhatikan cara penerapan pemasangan kodenya kalau sudah selesai silahkan SAVE, selamat mencoba semoga bermanfaat.