Cara Membuat Search By Igniel.com

Oleh Muhamad Arsyad

Pada Februari 05, 2020 Februari 08, 2020

Cara Membuat Search By Igniel.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial Cara Membuat Search By Igniel.com pada kesempatan ini akan saya coba di template viomagz 3.2 buatan mas suggeng untuk yang menggunakan template lain silahkan sesuaikan saja

Demo Klik disini

Cara Membuat Search By Igniel.com

1. Login ke Blogger silahkan Back up terlebih dahulu template yang anda gunakan

2. Silahkan cari kode seperti dibawah ini
/* NAV MENU */

Kemudian Tempatkan kode dibawah ini tepas diatas kode /* NAV MENU */

/* igniplex search */
.igniplexSearch{
position:absolute;
right:40px;
top:0px;
bottom:0px;
}
.igniplexSearch svg{
width:24px;
height:24px;
}
.igniplexSearch svg path{
fill:#fff;
}
.igniplexSearch .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;
}
.igniplexSearch .search .icon{
position:absolute;
top:8px;
right:8px;
border-radius:25px;
padding: 4px;
transition:all .5s ease;
cursor: pointer;
z-index: 100;
}
.igniplexSearch .search .icon:hover{
border-radius: 100px;
background: rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%;
}
.igniplexSearch .search .icon .open{
display:block;
}
.igniplexSearch .search .icon .close{
display:none;
}
.igniplexSearch .search .check:checked ~ .input, .igniplexSearch .search .input:focus{
padding:0px 40px 0px 15px;
width:calc(940px - 115px);
}
.igniplexSearch .search .check:checked ~ .icon .open{
display:none;
}
.igniplexSearch .search .check:checked ~ .icon .close{
display:block;
position:relative;
right:2px;
}
.igniplexSearch .search .check:checked ~ label:hover{
background-color:transparent !important;
}
.igniplexSearch .search .check:checked ~ .icon > svg path{
fill:#757575;
}
@media screen and (max-width: 600px) {
.igniplexSearch .search .check:checked ~ .input, .igniplexSearch .search .input:focus {
width: calc(100vw - 115px)!important;
z-index: 2;
}
}
@media screen and (max-width: 1130px) {
.igniplexSearch .search .check:checked ~ .input, .igniplexSearch .search .input:focus {
width: calc(90vw - 115px);
z-index: 2;
}
}

3. Kemudian silakan cari kode dibawah ini dan hapus

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

4. Silakan masukan kode dibawah ini di tempat yang kamu hapus tadi

<div class='igniplexSearch'>
<form action='/search' class='search' method='get'>
<input class='check' id='igniplexSearch' type='checkbox'/>
<input class='input' name='q' placeholder='Press Enter To Search' type='text'/>
<label class='icon' for='igniplexSearch'>
<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'></path></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'></path></svg>
</label>
</form>
</div>
<style>
#searchfs label { color:transparent;height:0px;
}
</style>
<div class='modedark'><input class='check' id='modedark' title='Mode Dark' type='checkbox'/>
<label class='iconmode' for='modedark'>
<svg class='openmode' viewBox='0 0 24 24'><path d='M7,10A2,2 0 0,1 9,12A2,2 0 0,1 7,14A2,2 0 0,1 5,12A2,2 0 0,1 7,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'></path></svg>
<svg class='closemode' viewBox='0 0 24 24'><path d='M17,10A2,2 0 0,1 19,12A2,2 0 0,1 17,14A2,2 0 0,1 15,12A2,2 0 0,1 17,10M17,7A5,5 0 0,1 22,12A5,5 0 0,1 17,17H7A5,5 0 0,1 2,12A5,5 0 0,1 7,7H17M7,9A3,3 0 0,0 4,12A3,3 0 0,0 7,15H17A3,3 0 0,0 20,12A3,3 0 0,0 17,9H7Z'></path></svg>
</label>
</div>
<style>
    <div class='search-icon'>
        <a href='#searchfs' title='Cari'><i class='fa fa-search'></i></a>
    </div>
</style>

Itulah sedikit tutorial yang dapat saya bagikan semoga bermanfaat dan jika ada pertanyaan atau request silahkan hubungi lewat contact sekian terimakasih bye-bye.

Blogger