Cara Membuat Floating Search Box Keren




Cara Membuat Floating Search Box Keren
Cara Membuat Floating Search Box Keren: Pada malam ini saya akan share cara membuat search box. Tujuan dari kita membuat search box ini adalah agar dapat mempermudah pengunjung untuk mencari artikel apa yang mereka ingin kan. Dan ada banyak cara juga untuk menambahkan sebuah fitur yang menarik di blog blog kita.
Nah untuk salah satunya yaitu kita bisa menambahkan fitur kotak penelusuran atau search box pada blog anda seperti search box mizipedia, untuk lebih jelasnya lagi anda bisa melihat demonya di atas ya.


Floating search box ini saya temukan pada blog dynamicdrive.com. Dan Saya menemukan sebuah menu dengan sebuah floating search box yang cukup menarik. Namun saya hanya mengambil fitur search box nya saja agar lebih mudah menambahkannya pada menu yang sudah ada di blog. Jika anda ingin memasang menu navigasi blog beserta  Floating Search Box nya, anda bisa langsung akses di dynamicdrive.com

Bagi anda yang ingin mencobanya silahkan anda ikuti langkah- langkah di bawah ini.

Cara Membuat Floating Search Box

  1. Pertama , pastikan anda sudah masuk di dasbhor milik anda sendiri
  2. Kemudian anda masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Dan anda 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>
  4. 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>
  5. Dan untuk tahapan yang terakhir silahkan anda simpan code icon search button berikut ini sesuka anda dimana menurut anda yang paling tepat untuk icon search button berikut
    <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>
  6. Jika sudah, maka jangan lupa anda klik Save Template
Demikian penjelasan pada malam ini semoga dapat bermanfaat untuk anda, selamat mencoba dan semoga berhasil


Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect