Cara Mengganti Search Box Pada Template Viomagz

Search box menjadi peran penting dalam sebuah blog, karena sebuah blog jika tidak ada search box, bisa dipastikan pengunjung akan sangat kesulitan untuk mencari artikel pada blog kita.

Ditambah lagi jika artikel kita sudah mencapai ratusan sudah dipastikan itu sangat susah, tapi yang saya heran ada beberapa blogger justru malah sengaja menghilangkan search box tersebut.

Pada umumnya search box ini bisa kalian modifikasi sesuai keinginan kalian, karena memang biasanya bawaan template tampil default dan kurang menarik.

karena peran search box sangat penting untuk blog, jadi pada artikel ini saya akan membagikan cara mengganti tampilan search box menjadi lebih menarik, khususnya pada template viomagz, untuk template lain bisa kalian sesuikan sendiri ya. 

Buat yang penasaran langsung saja ikuti langkah-langkahnya dibawah ini.

CARA MENGGANTI TAMPILAN SEARCH BOX PADA TEMPLATE VIOMAGZ

1. Langkah pertama masuk Dashbor Blogger > Tema > Edit HTML, kemudian cari dan hapus kode dibawah 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>

2. Langkah selanjutnya ganti kode diatas dengan kode dibawah 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>

3. Langkah ketiga cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatasnya. 

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

Nah itulah sobat cara mengganti search box pada template viomagz, jika ada yang ditanyakan silahkan komentar dibawah.

Akhir Kata :

Terimakasih

Klik Tombol Dibawah Untuk Menuju Link Anda

CONTINUE