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.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    6 Komentar

    1. Ini yang ane tunggu-tunggu
      Sempat melihat kemarin blognya tiba-tiba ganti tampilan search boxnya 😂

      BalasHapus
      Balasan
      1. hahahah siap bang, terima kasih sudah berkunjung di blog ini

        Hapus
    2. Ditunggu tutorial menu navigasi ala igniel gan

      BalasHapus
      Balasan
      1. Nanti bakal di buat kok mas, di tunggu aja heheh makasih sudah berkunjung di blog ini.

        Hapus
    3. Kok di Viomagz ane nge bug ya??

      BalasHapus
      Balasan
      1. Nanti ada kode yang kehapus coba upload template orinya habis tuh coba pasang lagi

        Hapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel