Cara Membuat Tombol Search Box Responsive Ala Igniplex

Apa itu Search Box ? seperti namanya Search Box merupakan kotak pencarian yang ada ditemplate tersebut. Search Box merupakan hal penting yang harus dimiliki seorang pemilik website, Mengapa ? karna Search Box dapat mempermudah pengunjung web untuk menemukan artikel yang ingin dia cari tanpa perlu repot repot membuka sitemap atau melakukan reload halaman untuk menemukan artikel yang dia inginkan.

Sebenarnya setiap template itu sudah memiliki fitur Search Box tersebut, namun diantara kamu mungkin salah satunya menginginkan tampilan Search Box yang berbeda dari biasanya. Nah kali ini saya akan membagikan sebuah tutorial untuk mengubah tombol search milik kamu menjadi lebih menarik dengan style pencarian ala Igniplex, mungkin kamu sudah tau Mengenai Igniplex atau biasa disebut Igniel, yang mana merupakan salah satu blog tutorial yang sangat banyak dikunjungi oleh blogger.

Nah bagi kamu yang ingin mencoba atau ingin tau bagaimana cara membuat tombol Search Box ala Igniplex, yuk ikuti tutorial dibawah ini hingga selesai.

Membuat Tombol Search Box Responsive Ala Igniplex

1. Pertama, login dulu ke Blogger,
2. Kemudian, pada dashboard Blogger, pilih Tema ⇒ Edit HTML,
3. Setelah itu, copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin> atau </style>,

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

5. Lalu, cari kode yang seperti dibawah ini,

<div class='search-icon'>
<a href='#searchfs'><i class='fa fa-search'/></a>
</div>

<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
<form action='/search' id='search-form' method='get'>
<b:switch var='data:blog.locale'><b:case value='id'/><input name='q' placeholder='ketik katakunci' type='search' value=''/>
<b:default/><input name='q' placeholder='type to search' type='search' value=''/></b:switch>
<input name='max-results' type='hidden' value='8'/>
</form>
</div>

Ganti dengan kode Search yang saya sediakan dibawah ini,

<div class='igniplexSearch'>
<form action='/search' class='search' method='get'>
<input class='check' id='igniplexSearch' type='checkbox'/>
<input class='input' name='q' placeholder='*Search Here...' type='text'/>
<label class='icon' for='igniplexSearch'>
<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>

6. Terakhir simpan atau save template.

Kesimpulan
Search Box Responsive ini merupakan style dari template Igniplex (Igniel), tombol search ini sangat cocok untuk kamu yang lebih suka kelihatan Simple, dan pastinya tombol search ini responsive ke semua device atau perangkat.

Akhir Kata
Sekian tutorial membuat search box responsive ala Igniplex yang dapat saya bagikan, semoga bermanfaat dan tunggu tutorial menarik selanjutnya :D