Beranda Blogging Tutorial Cara Membuat Search Box Seperti Igniplex

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.

More From Author