Cara Mengubah Tombol Search Viomagz Ala Igniel - WESTOIKU

Cara membuat tombol search by igniel pada template viomagz punya mas sugeng.

" Disini saya bukan bermaksud tidak menghargai hasil karya dari mas sugeng.

Ini hanya sekedar tutorial agar tampilan blog nya sedikit berbeda dari yang lain.

Karna  template viomagz punya mas sugeng sudah sangat populer , sehingga banyak banget penggunanya.

" Baca dulu "

Kelebihan Template Blogger Viomagz

• Responsive.
• Fast Loading.
• SEO Template Telah Di Optimalkan.
• Ads Optimized.
• Tersedia Slot Iklan Atas Artikel , tengah artikel 1 , tengah artikel 2 , dan Bawah Artikel.
• Support Desainer Thema.
• Menggunakan Schema Markup.
• Breadcrumb
• Sticky.
• Related post.
• Back to top button.

Sangat cocok untuk pengguna blogger (blogspot) , dan siap untuk daftar Adsense.

Review Template :

DEMO

Saya rasa kalian sudah pernah mencobanya.

Dan kali ini sedikit fitur tambahan

Baca juga : Template Blogger Terbaik 2023

Cara Ubah Tombol Search Viomagz Mirip Iqniel.

Sebelum melakukan edit template , alangkah baiknya anda BackUp terlebih dahulu , apabila terjadi error , bisa segera di pulihkan.

Lansung saja , lanjut ...

1. Buka Akun Blogger.

2. Pilih Theme , Edit HTML.

3. Cari kode 

   ]]></b:skin>

Paste kan kode ini tepat di atasnya :

/* Search Box */
.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;}}

4. Selanjutnya cari kode ini , 

 Hapus lalu Ganti ..

cari kode ini hapus lalu ganti..

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

5. Ganti Dengan Kode Ini

ini code nya gaes..

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

Simpan Template.

Selesai.

Tampilan Tombol Search Setelah Ganti Ala Iqniel.

Selamat mencoba , semoga bermanfaat..!