Search box merupakan menu wajib yang ada di sebuah situs yang berfungsi untuk memudahkan pengunjung mencari artikel yang akan di cari secara cepat terlebih lagi jika situs itu memiliki banyak sekali artikel di dalamnya , Pusing juga ya mengscroll banyak postingan hanya untuk mencari artikel yang ingin di baca.
Secara umum search box memiliki banyak sekali desainnya dan juga cara peletakannya beda beda bisa di tempatkan di bagian header maupun di bagian bawah dekat menu footer.
Karena fungsi menu search box sangat penting maka saya akan memberikan cara membuat menu search box ala igniel khusus untuk template sejuta umat yaitu viomagz, saya sendiri menggunakan search box di versi 3.3 .
Pertama, Anda login blogger
Buka bagian tema lalu klik edit HTML
Lalu cari kode
<div class='search-icon'>
<a aria-label='Cari' href='#searchfs' title='Cari'>
<svg 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>
</a>
</div>
<div id='searchfs'>
<button class='close' type='button'>×</button>
<form action='/search' id='search-form'>
<b:switch var='data:blog.locale'>
<b:case value='id'/>
<input aria-label='ketik katakunci' name='q' placeholder='ketik katakunci' type='search' value=''/>
<b:default/>
<input aria-label='type to search' name='q' placeholder='type to search' type='search' value=''/>
</b:switch>
<input name='max-results' type='hidden' value='8'/>
</form>
</div>Ganti kode bawaan viomagz diatas dengan kode di bawah 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>
Sekarang anda cari kode ]]></b:skin> dan letakan kode di bawah ini tepat di atasnya.
/* Igniplex Search Box by Smarth Tekno */
.teknsearch .search .input {
z-index: 10;
}
.check{display:none}
.teknsearch{
position:absolute;
right:0px;
top:0px;
bottom:0px;
}
.teknsearch svg{
width:24px;
height:24px;
}
.teknsearch svg path{
fill:#fff; /* Warna icon search */
}
.teknsearch .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;
}
.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:0px 40px 0px 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;}}
Pastikan cara pemasangan kode dilakukan dengan benar agar tidak terjadi kesalahan, Sekian dan terima kasih.