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.
Posting Komentar