Cara Merubah Search Box di Template Viomagz ala 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.
Saya sudah sering 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 </form></div>.
<div class='search-icon'>
Setelah ditemukan, ganti kode diatas dengan kode dibawah 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>
Selanjutnya, silahkan cari kode dibawah ini!
]]></b:skin>
Setelah ditemukan, silahkan copy CSS dibawah ini, dan letakan sebelum kode ]]></b:skin>.
/* 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;}}
Pada umumnya search box ini sangat mirip dengan tampilan search box di template Ignilplex. Namun dalam pemasang awal di template viomagz, anda akan menemukan masalah posisi search box malah berada dibawah header.
Oleh karena itu untuk solusi masalah tersebut, silahkan lihat setelan pada kode CSS search box ala ignilplex dibawah ini. Atau copas saja langsung dengan cara double click.
/* 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;}}
Untuk lebih mempermudah dalam pemasangan, maka sebaiknya gunakan kode yang sudah saya modifikasi diatas, karena sudah saya setting sedemikian rupa agar tampilan dari search box tersebut berada tepat ditengah header di viomagz, dan tampilannya pun sudah responsif baik saat dibuka di desktop atau diperangkat mobile.
Baca: Cara Membuat Tombol Back to top smooth
Jika anda ingin menambahkan animasi kotak berputar pada header viomagz, maka silahkan baca artikel cara membuat animasi kota melayang di template viomagz.
Semoga bermanfaat.
Posting Komentar