==Iklan Dipate Disini===
Sebenarnya setiap template itu sudah memiliki tombol search, akan tetapi terkadang kita ingin memiliki tombol search yang lebih responsive atau ingin berbeda dari yang lainnya. Nah, disini saya akan membuat tombol search yang responsive seperti igniel. Igniel ialah salah satu blogger perempuan dari indonesia yang membahas tentang blogger dan template blog yang sedang ramai di kunjungi oleh kalangan blogger indonesia. Jika kalian mau membuat tombol search yang responsive seperti igniel ikuti langkahnya di bawah ini.
Cara Membuat Tombol Search Box Responsive DI Blog Seperti Igniel
1. Buka Blog kalian
2. Pilih Tema lalu pilih Edit HTML
3. Salin kode di bawah ini dan letakan di atas kode ]]</b:skin>
.difinmediasearch .search .input {
z-index: 10;
}
.check{display:none}
.difinmediasearch{
position:absolute;
right:0px;
top:0px;
bottom:0px;
}
.difinmediasearch svg{
width:24px;
height:24px;
}
.difinmediasearch svg path{
fill:#fff; /* Warna icon search */
}
.difinmediasearch .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;
}
.difinmediasearch .search .icon{
position:absolute;
top:8px;
right:8px;
border-radius:25px;
padding: 4px;
transition:all .5s ease;
cursor: pointer;
z-index: 100;
}
.difinmediasearch .search .icon .open{
display:block;
}
.difinmediasearch .search .icon .close{
display:none;
}
.difinmediasearch .search .check:checked ~ .input, .difinmediasearch .search .input:focus{
padding:0px 40px 0px 15px;
width:calc(940px - 115px);
}
.difinmediasearch .search .check:checked ~ .icon .open{
display:none;
}
.difinmediasearch .search .check:checked ~ .icon .close{
display:block;
position:relative;
right:2px;
}
.difinmediasearch .search .check:checked ~ label:hover{
background-color:transparent !important;
}
.difinmediasearch .search .check:checked ~ .icon > svg path{
fill:#000; /* Warna icon close */
}
@media screen and (max-width: 600px) {
.difinmediasearch .search .check:checked ~ .input, .difinmediasearch .search .input:focus {
width: calc(100vw - 115px)!important;
z-index: 2;}
4. Lanjut cari kode <div class='search-icon'> dan hapus kode tersebut hingga berahiran </style> lalu ganti dengan kode di bawah ini.
<div class='difinmediasearch'>
<form action='/search' class='search' method='get'>
<input class='check' id='difinmediasearch' type='checkbox'/>
<input class='input' name='q' placeholder='Ketik dan Enter' type='text'/>
<label class='icon' for='difinmediasearch'>
<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>
5. Simpan template kalian dan lihat hasilnya.
Bagaimana sangat mudah bukan untuk tutorial tentang Cara Membuat Tombol Search Box Responsive Di Blog Seperti Igniel, jika ada pertanyaan silahkan bertanya di kolom komentar di bawah ini. Terimakasih sudah berkunjung dan semoga bermanfaat.
==Iklan Dipate Disini===