Skip to main content

Cara Mudah Membuat Search Box Seperti Igniplex

Cara membuat tombol search box seperti igniplex - Selamat datang semuanya, beberapa hari ini saya tidak membagikan tutorial menarik lainnya, bukan karena saya kehabisan ide, melainkan saya sibuk dengan kerja nyata saya. Maka dari itu di pertemuan kali ini saya sempatkan untuk berbagi tutorial menarik lagi.

Di sini kita akan membahas cara membuat search box mirip igniplex, bagi yang tidak tahu, igniplex merupakan template hasil karya mba igniel yang memiliki ciri khas warna hijau.

Template igniplex sendiri dibuat dengan memiliki fitur yang melimpah dan modern, Sebelum anda masuk ke tutorial, silahkan baca tutorial cara membuat menu navigasi seperti igniel, jika sudah maka lanjut ke tutorial.

Cara Membuat Search Box Seperti Igniplex

Untuk pembahasan pertama tentang template ini kita mulai dari cara membuat search box nya, Tutorial satu ini saya tujukan untuk pengguna viomagz ya.

  1. Pertama silahkan anda login ke akun blogger, kemudian pilih Tema >> Edit HTML
  2. Carilah kode search box bawaan viomagz, kurang lebih kode nya seperti dibawah ini.
  3. <div class='search-icon'>
    
     <a aria-label='Cari' href='#searchfs' title='Cari'>
    
      <svg viewBox='0 0 24 24'>
    
       <path 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>
    
     </a>
    
    </div>
    
    <div id='searchfs'>
    
    <button class='close' type='button'>&#215;</button>
    
      <form action='/search' id='search-form'>
    
        <b:switch var='data:blog.locale'>
    
          <b:case value='id'/>
    
          <input aria-label='ketik katakunci' name='q' placeholder='ketik katakunci' type='search' value=''/>
    
        <b:default/>
    
          <input aria-label='type to search' name='q' placeholder='type to search' type='search' value=''/>
    
        </b:switch>
    
     <input name='max-results' type='hidden' value='8'/>
    
      </form>
    
    </div>
  4. Ganti kode diatas dengan kode berikut.
  5. <div class='teknsearch'>
    
    <form action='/search' class='search' method='get'>
    
    <input class='check' id='teknsearch' type='checkbox'/>
    
    <input class='input' name='q' placeholder='Ketik dan Enter' type='text'/>
    
    <label class='icon' for='teknsearch'>
    
    <svg class='open' viewBox='0 0 24 24'><path 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>
    
    <svg class='close' viewBox='0 0 24 24'><path d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/></svg>
    
    </label>
    
    </form>
    
    </div>
  6. Jika sudah, silahkan anda cari kode ]]></b:skin> kemudian letakkan kode dibawah ini tepat diatasnya.
  7. /* Igniplex Search Box by Smarth Tekno */
    
    .teknsearch .search .input {
    
    z-index: 10;
    
    }
    
    .check{display:none}
    
    .teknsearch{
    
    position:absolute;
    
    right:0px;
    
    top:0px;
    
    bottom:0px;
    
    }
    
    .teknsearch svg{
    
    width:24px;
    
    height:24px;
    
    }
    
    .teknsearch svg path{
    
    fill:#fff; /* Warna icon search */
    
    }
    
    .teknsearch .search .input {
    
    background-color:#fff;
    
    color:#4b4f56;
    
    padding:0px;
    
    width:0px;
    
    height:30px;
    
    border-radius:25px;
    
    vertical-align:bottom;
    
    top:9px;
    
    right:10px;
    
    position:relative;
    
    transition:all .3s ease;
    
    outline: none;
    
    border:none;
    
    z-index: 90;
    
    }
    
    .teknsearch .search .icon{
    
    position:absolute;
    
    top:8px;
    
    right:8px;
    
    border-radius:25px;
    
    padding: 4px;
    
    transition:all .5s ease;
    
    cursor: pointer;
    
    z-index: 100;
    
    }
    
    .teknsearch .search .icon .open{
    
    display:block;
    
    }
    
    .teknsearch .search .icon .close{
    
    display:none;
    
    }
    
    .teknsearch .search .check:checked ~ .input, .teknsearch .search .input:focus{
    
    padding:0px 40px 0px 15px;
    
    width:calc(940px - 115px);
    
    }
    
    .teknsearch .search .check:checked ~ .icon .open{
    
    display:none;
    
    }
    
    .teknsearch .search .check:checked ~ .icon .close{
    
    display:block;
    
    position:relative;
    
    right:2px;
    
    }
    
    .teknsearch .search .check:checked ~ label:hover{
    
    background-color:transparent !important;
    
    }
    
    .teknsearch .search .check:checked ~ .icon > svg path{
    
    fill:#000; /* Warna icon close */
    
    }
    
    @media screen and (max-width: 600px) {
    
    .teknsearch .search .check:checked ~ .input, .teknsearch .search .input:focus {
    
    width: calc(100vw - 115px)!important;
    
    z-index: 2;}}
  8. Terakhir simpan template.

Penutup

Dengan mengikuti langkah diatas, anda sudah berhasil membuat search box seperti igniplex. Jangan lupa berlangganan dengan blog ini, karena admin akan update tutorial menarik lainnya setiap hari.

www.repick.net

NOTE : Konten yang ada di blog ini asli karya Gio Lesmana. Tidak diperkenankan mengambil isi konten tanpa izin. Traktir saya kopi melalui: Paypal.

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