Cara Membuat Search By Igniel.com
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 */
3. Kemudian silakan cari kode dibawah ini dan hapus
/* 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;
}
}
<div class='search-icon'>
<a href='#searchfs'><i class='fa fa-search'/></a>
</div>
<div id='searchfs'>
<button class='close' type='button'>×</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.
1 komentar
LuckyClub is one of the most exciting new online casino site in the UK. Launched in luckyclub.live 2017 it is owned by the group and has operated by the same