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
