Cara Membuat Search Box Responsive Seperti Igniplex

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Search Box Responsive Seperti Igniplex, Sebelum kita masuk ketutorialnya saya ingin memberikan informasi mengenai search yaitu sebuah komponen yang wajib ada di suatu tampilan web atau blog atau biasa kita sebuah sebagai kotak pencarian.

Apa Itu Search Box ?

Search Box (Kotak Pencarian) adalah widget yang berfungsi untuk memudahkan pengunjung dalam mencari artikel / postingan yang mereka inginkan dengan cara hanya mengetikkan beberapa kata yang ingin dicari ke dalam kotak tersebut lalu klik tombol search maka akan menemukan / menampilkan hasil pencarian dari blog tersebut tanpa harus mencarinya dengan susah payah.

Cara Membuat Search Box Responsive Seperti Igniplex

1. Silahkan kamu login keblogger.com dengan menggunakan Gmail kamu.
2. Masuk kemenu TEMA > klik Edit HTML
3. Selanjutnya, cari kode berikut ini dan hapus kode tersebut.

<div class='search-icon'>
 <a aria-label='Cari' href='#searchfs' title='Cari'>
.
.
.
 </form>
</div>

4. Silahkan kamu ganti kode diatas dengan kode dibawah ini.

<div class='jagoansearch'>
<form action='/search' class='search' method='get'>
<input class='check' id='Jagoansearch' type='checkbox'/>
<input class='input' name='q' placeholder='Ketik dan Enter' type='text'/>
<label class='icon' for='Jagoansearch'>
<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>

5. Selanjutnya letakan kode CSS-nya dibawah ini tepat DIATAS kode ]]></b:skin> atau </style>

/* Search igniplex */
.jagoansearch .search .input {
z-index: 10;
}
.check{display:none}
.jagoansearch{
position:absolute;
right:0px;
top:0px;
bottom:0px;
}
.jagoansearch svg{
width:24px;
height:24px;
}
.jagoansearch svg path{
fill:#fff; /* Warna icon search */
}
.jagoansearch .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;
}
.jagoansearch .search .icon{
position:absolute;
top:8px;
right:8px;
border-radius:25px;
padding: 4px;
transition:all .5s ease;
cursor: pointer;
z-index: 100;
}
.jagoansearch .search .icon .open{
display:block;
}
.jagoansearch .search .icon .close{
display:none;
}
.jagoansearch .search .check:checked ~ .input, .jagoansearch .search .input:focus{
padding:0px 40px 0px 15px;
width:calc(940px - 115px);
}
.jagoansearch .search .check:checked ~ .icon .open{
display:none;
}
.jagoansearch .search .check:checked ~ .icon .close{
display:block;
position:relative;
right:2px;
}
.jagoansearch .search .check:checked ~ label:hover{
background-color:transparent !important;
}
.jagoansearch .search .check:checked ~ .icon > svg path{
fill:#000; /* Warna icon close */
}
@media screen and (max-width: 600px) {
.jagoansearch .search .check:checked ~ .input, .jagoansearch .search .input:focus {
width: calc(100vw - 115px)!important;
z-index: 2;}
}

6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Search Box Responsive Seperti Igniplex, apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.