Memasang Floating Search Box With Jquery for Blogspot

Ada banyak cara untuk memperindah blog agar pengunjung dapat bisa mengexplore lebih dalam mengenai isi dari blog yang kita kelola dan sajikan salah satunya adalah 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 kode Jquery. Sehingga tampilannya akan lebih menarik dan simple bahkan blog akan terlihat lebih Profesional dimata pengunjung. Kode Floating Search Box ini saya temukan di dynamicdrive.com saat berkunjung melihat ada tampilan menarik di search box tersebut yang pada akhirnya mendapatkan ide untuk membuat Postingan ini.

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

Langkah Pertama

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

Langkah Ke Dua

Silahkan salin kode CSS dibawah ini lalu letakkan di atas kode </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 kode HTML dibawah ini lalu letakkan di atas kode </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 kode 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 jika sudah selesai silahkan SAVE, selamat mencoba semoga bermanfaat.