Cara Merubah Search Box di Template Viomagz ala Ignilplex - Max Ikhsan

Berikut ini adalah cara lengkap cara merubah search di template viomagz. Search box ini sangat mirip dengan tampilan search box template Ignilplex

Pada umumnya setiap blog harus memiliki sebuah tool search dalam blog tersebut. Namun ada juga sebagian blogger yang tidak memasang tool seacrh pada blognya.

Perlu diketahui bahwa tool search dalam blog memiliki fungsi yang sangat penting. Karena dengan adanya tool search tersebut pengujung bisa dengan mudah mencari informasi lebih tertarget.

Seiring perkembangan dunia blogging yang makin maju, maka saat ini tampilan dari tool search dalam blog bisa dibuat semakin menari. Oleh karena itu dalam artikel kali ini saya akan memberikan sebuah tutorial cara merubah tools search box di template viomagz.

Cara Merubah Search Box di Template Viomagz

Viomagz adalah template yang dibuat oleh seorang blogger bernama mas sugeng. Beliau menjual template ini pada blognya yaitu sugeng.id.

menjelas tentang kelebihan dari template ini, dan salah satu kelebihan yang paling saya suka adalah template viomagz ini cuup fleksibel untuk dimodifikasi, termasuk tools search boxnya.

Langkah pertama yang harus dilakukan untuk merubah tools search box di viomagz adalah buka dashboard blogger, pilih tema, lalu pilih edit HTML.

Cari kode dibawah ini, dan hapus hingga akhiran

<div class='search-icon'>

Setelah ditemukan, ganti kode diatas dengan kode dibawah

<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, silahkan cari kode dibawah ini

]]></b:skin> 

]]></b:skin>

Setelah ditum kodemukan, silahkan copy CSS dibawah ini, dan letakan sebeleum

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

Yang terakhir

Klik simpan dan lihat hasilnya.

Kalau ada yang tidak sesuai letaknya silahkan di otak atik saja ya

oke munkin segitu dulu dari saya, terimakasih sudah mampir

sumber artikel