-->
Cara Membuat Search Box Seperti Igniplex

Cara Membuat Search Box Seperti Igniplex

Search Box merupakan sebuah kotak pencarian yang ada pada sebuah situs atau blog dan bertujuan untuk memudahkan pengunjung dalam mencari sesuatu. Ini merupakan hal yang wajib ada pada sebuah situs atau blog jika kalian sudah memiliki banyak sekali konten atau artikel di dalamnya.

Search Box memiliki desain yang bermacam-macam. Bahkan dalam peletakkannya pun bisa berada di atas ataupun di bawah pada sebuah situsnya.

Hari ini saya ingin membagikan Cara Membuat Search Box Seperti Igniplex. Saya memilih Igniplex karena templatenya sudah lumayan terkenal dan tampilan Search Box-nya cukup simpel juga.

Tutorial yang saya jelaskan di bawah itu untuk pengguna template VioMagz. Kalian bisa juga memasangnya pada template lain jika kalian bisa mengubah dan menyesuaikan kodenya sendiri.

Langsung saja kita ke tutorialnya.

1. Pergi ke Blogger > Tema > Edit HTML.

2. Silakan kalian cari kode Search Box bawaan Viomagz seperti ini.

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

3. Jika sudah ketemu, silakan ganti dengan kode di bawah ini.

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

4. Selanjutnya kalian cari kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atasnya.

/* 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;}}

5. Selesai.

Penutup

Baiklah begitu saja tutorialnya pada kesempatan kali ini. Semoga bisa menambah wawasan dan juga bermanfaat untuk kalian semua. Jika ada yang ingin ditanyakan silakan berkomentar di bawah.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA OVO Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    3 Komentar

    1. Tutormu bermanfaat semua brio,mantab gw liat tutormu terus tiap hari buat design template viomagz

      BalasHapus
    2. Search icon sama profile seperti punyamu malah menumpuk.gimana biar search iconnya agak kekiri?makasih

      BalasHapus
      Balasan
      1. Kode search icon dan profile yang ane bagikan itu emang gak bisa digabung

        Kamu bisa pasang salah satunya aja

        Tapi kalau ingin memasang keduanya, kamu bisa mengedit css margin yang ada pada kode search icon tadi agar bisa kegeser ke kiri

        Hapus
    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel