×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Tombol Search Box Responsive Ala Igniplex

February 14, 2020   • 2 Comments

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 TemaEdit 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


Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

2 Responses to "Cara Membuat Tombol Search Box Responsive Ala Igniplex"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With