Cara Membuat Search Box Pure CSS Seperti Igniplex

Cara Membuat Search Box Pure CSS Seperti Igniplex

cara membuat search box/kotak pencarian dengan html dan css di blogger

Suatu komponen yang wajib ada di tampilan web atau blog selain dari menu navigasi adalah search box atau kotak pencarian.

Dewasa ini, para Blogger berupaya untuk membuat tampilan web atau blog semakin menarik dan tidak ketinggalan jaman.

Dengan menerapkan berbagai widget, popup menu dan lain sebagainya di blog mereka.

Namun ada hal yang penting untuk diperhatikan oleh para blogger, yap itu adalah loading blog atau web.

Sekeren apapun tampilan dari website atau blog Anda, jika loading nya lambat maka visitor pasti akan pergi.

Contohnya jika terlalu banyak menggunakan widget, warna bacground yang terlalu mencolok, penggunaan script berlebihan dan lain sebagainya.

Tentu saja visitor tidak akan betah membaca blog Anda karena tidak user friendly.

Berbicara soal tampilan, tentu saja banyak cara untuk membuat tampilan website/blog menarik namun di sisi lain tetap fast loading.

Salah satu solusinya adalah dengan memaksimalkan penggunaan CSS pada blog.

Nah pada postingan ini Saya akan memberikan tutorial cara membuat search box ala Igniplex dengan hanya menggunakan CSS dan Html sebagai pemanggilnya.

So, langsung saja kita ke tutorialnya.

Cara Membuat Search Box di Viomagz Seperti Template Igniplex


1. Masuk ke menu edit HTML

2. Cari kode HTML search box nya, setiap template berbeda ya. Tinggal disesuaikan saja. Jika Anda menggunakan template Viomagz, silahkan cari kode di bawah ini.
  • Tekan CTRL+F untuk mempermudah pencarian.


<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. Sudah nemu? Jika sudah hapus kode tersebut dan ganti dengan HTML 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 kita akan mempercantiknya dengan menambakan CSS di bawah ini. Letakan CSS-nya di atas kode </style> atau ]]></b:skin>


/* Search Seperti igniplex */
.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, tidak sulit kan.

                                Demo

Akhir kata, jika merasa artikel ini bermanfaat silahkan di share.

Share
Previous
« Prev Post

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel