Cara Mengubah Tombol Search Viomagz - WESTOIKU

Westoiku.

Pada kesempatan kali ini situs westoiku akan membagikan sebuah tutorial tentang cara mengubah tombol search viomagz.

Pada postingan sebelumnya kami sudah pernah membuatkan artikel postingan yang sama persis dengan pembahasan kali ini. Namun artikel tersebut sudah lama terposting , jadi saya membuatkan artikel yang lebih terbaru.

Fungsi tombol search atau tombol pencarian pada sebuah template blogger adalah berguna untuk melakukan pencarian sebuah artikel atau sebuah halaman yang terdapat pada situs tersebut.

Pengunjung bisa melakukan sebuah pencarian artikel menarik lainya tanpa harus keluar dari laman browser.

Cukup menggunakan tombol search yang berada di pojok kanan atas , klik,, lalu masukan sebuah pencarian dengan sebuah kata kunci yang akan di cari.

Jika situs web tersebut mempunyai banyak konten artikel  , pasti akan menampilkan artikel menarik lainya yang bisa di baca oleh pengguna.

Sebenarnya tombol search viomagz template blogger buatan mas sugeng sudah di desain  secara responsive , selain tampilanya yang menarik, juga mempunyai sifat mobile frienly , sehingga template blogger viomagz sangat cocok untuk di pasang pada blogger.

Baca juga : Template Blogger Terbaik 2023

Sebelum lebih lanjut , disini saya ingin menyampaikan bahwa tutorial ini bukan bermaksud menyelewengkan template blogger viomagz , disini hanya mendesain  , atau merubah tampilan tombol search viomagz supaya kelihatan berbeda dari yang lainya.

" Tahu sendiri kan "  bahwa template blogger viomagz mempunyai nilai yang bagus di dunia internet ,

Sehingga banyaknya seorang blogger hampir semua mereka sudah mengenal dan sudah pernah menggunakanya.jadi merubah sedikit tampilanya biar berbeda.

Manfaat tombol search viomagz pada template blogger selain mempermudah pengunjung untuk melakukan pencarian adalah dapat mempercantik tampilan blogger , dengan begitu bisa menarik perhatian pengguna.

Apakah sobat benar benar ingin mengganti tampilan tombol search pada template viomagz.

Sebenarnya sudah keren lho .. !

Ini dia kelebihan template blogger viomagz

• Responsive.
• Seo Frienly.
• 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 Scema MarkUp.
• Breadcrumb.
• Sticky.
• Rellated Post.
• Back To Top Button.

Sehingga sangat cocok untuk di gunakan oleh seorang blogger,dan siap untuk di daftarkan Google Adsense.

Cara Mengubah Tombol Search Viomagz Ala Iqniel.

Yuk simak langkah langkah berikut di bawah ini dengan benar supaya tidak terjadi error.

Perlu diingat !

Lakukan Back-Up terlebih dahulu pada template blogger milik anda yang sekarang.

Ini bertujuan untuk mencegah terjadinya error sehingga bisa di pulihkan kembali.

1. Buka Akun Blogger.

2. Pilih Thema  "Edit HTML"

3. Cari kode    ]]></b:skin>   lalu taruh kode ini tepat diatasnya

/* westoiku */

/* 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. Selanjut cari kode ini..

Hapus lalu ganti

/* westoiku */

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

/* westoiku */

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

6. Terakhir klik simpan.

Selesai ,,!

Anda telah berhasil mengganti tombol search viomagz , untuk tampilanya sama persisi pada gambar di paling atas artikel.

Demikian artikel dari westoiku seputar blogger yang kali ini dengan judul cara mengubah tombol search viomagz.