Aug 31, 2017

Memasang Floating Search Box With Jquery for Blogspot

Floating Search Box

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>
Perhatikan cara penerapan pemasangan kodenya jika sudah selesai silahkan SAVE, selamat mencoba semoga bermanfaat.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.