Search Box
Search box atau kotak pencari adalah sebuah kotak pencarian yang terdapat di sebuah situs atau blog yang berfungsi untuk memudahkan pengunjung mencari konten atau artikel yang terdapat di sebuah situs.
Search box ini sangat penting, jika kalian sudah memiliki banyak artikel di blog kalian agar pengunjung dapat mencari artikel yang ingin kalian cari di blog kalian.
Ada banyak macam desain search box yang ada, kali ini saya ingin membagikan search box yang tampilannya simple dan juga cantik. Search box ini sangat direkomendasikan bagi kalian yang ingin mempercantik blog kalian.
Jika kalian tertarik memasang search box ini di blog kalian, simak tutorial berikut.
Cara Memasang Search Box Keren
- Pertama, pergi ke Blogger > Tema > Edit HTML.
- Kemudian, cari kode search box blog bawaan kalian dan hapus kodenya.
- Jika sudah, kalian ganti dengan kode dibawah 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>- Selanjutnya, masukkan CSS berikut diatas kode ]]></b:skin>.
/* Search Box */
.teknsearch .search .input{z-index:10}
.check{display:none}
.teknsearch{position:absolute;right:0;top:0;bottom:0}
.teknsearch svg{width:24px;height:24px}
.teknsearch svg path{fill:#fff;/* Warna icon search */}
.teknsearch .search .input{background-color:#fff;color:#4b4f56;padding:0;width:0;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:0 40px 0 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}}- Terakhir, simpan tema kalian dan lihat perubahannya.
Akhir Kata
Oke, mungkin itu saja tutorial kali ini dari saya, silahkan komen dibawah jika kalian kesulitan. Terimakasih.