Cara Membuat Search Box Responsive Tanpa Javascript

Cara Membuat Search Box Responsive Tanpa Javascript

cara mudah membuat tombol search box dengan html dan css

Setelah sebelumnya saya share cara modifikasi search box pure css, nah kali ini akan kembali membahas hal tersebut tapi dalam tampilan berbeda.

Search box atau kontok penelusuran merupakan bagian penting untuk ada di blog atau web.

Kotak search sangat berguna bagi visitor untuk mencari artikel lainnya berdasarkan kata kunci yang tersedia dan mengulik lebih dalam mengenai blog atau website Anda.

Jika Anda pengguna Blogger, secara default sebenarnya mereka sudah menyediakan widget tersebut, namun tampilannya begitu sederhana.

Karena kurang menarik, banyak pengguna blogger tidak menggunakannya dan memilih untuk memodifikasi sendiri.

Walau sebagian besar template sekarang sudah menyediakan search box-nya sesuai dengan tema masing-masing, namun belum tentu hal tersebut sesuai dengan selera kita.

Nah pada artikel ini saya memberikan salah satu contoh kontak penelusuran resposiv tanpa Javascript, alias kita hanya menggunakan CSS dan HTML saja.

Dengan mengurangi penggunaan Javascript, merupakan salah satu cara membantu meningkatkan kecepatan loading blog Anda.

Jadi kesimpulannya, kita perlu meminimalisir penggunaan javascript.

Membuat tampilan blog semenarik mungkin merupakan hal wajar, namun perlu diperhatikan bahwa jika terlalu banyak menggunakan script justru malah berdampak buruk bagi blog Anda.

Cara Membuat Search Box Responsive Dengan HTML dan CSS


1. Masuk ke dashbor blogger, klik Tema > Edit HTML.

2. Cari kode HTML search box default template Anda, biasanya berada di bagian atas kode </header>. Tekan CTRL+F untuk mempermudah pencarian.
  • Jika Anda memakai template Viomagz, cukup cari HTML di bawah ini.

<div class='search-icon'>
 <a aria-label='Cari' href='#searchfs' title='Cari'>
  <svg 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>
 </a>
</div>
<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
  <form action='/search' id='search-form'>
    <b:switch var='data:blog.locale'>
      <b:case value='id'/>
      <input aria-label='ketik katakunci' name='q' placeholder='ketik katakunci' type='search' value=''/>
    <b:default/>
      <input aria-label='type to search' name='q' placeholder='type to search' type='search' value=''/>
    </b:switch>
 <input name='max-results' type='hidden' value='8'/>
  </form>
</div>

3. Lalu hapus kode tersebut (search box bawaan template) dan ganti dengan HTML di bawah ini.

<div class='search-icon'>
<div id='show'>
<span class='smallbutton' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;' title='Cari Artikel'>
<svg class='icons icon-search' 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' fill='#fff'/>/* Warna Icon Search */
</svg></span></div></div>
<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='search-wrap'>
<div id='search'>
<form action='/search' id='searchform'>
<input id='search-form' name='q' placeholder='Search...' required='required' type='text'/><div id='hide'><span class='smallbutton' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;' title='Tutup'>
<svg class='icons icon-close' viewBox='0 0 24 24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#444'/></svg></span></div>
</form>
</div></div></div></div>

4. Jika sudah, letakan CSS di bawah ini tepat di atas kode </style> atau </b:skin>.

/* SEARCH FORM */
#search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0 ease-in-out;-moz-animation:shownow 0 ease-in-out;animation:shownow 0 ease-in-out }@keyframes shownow{0{transform:scale(0.9) }50%{transform:scale(1.01) }100%{transform:scale(1) }}#search-wrap{clear:both;width:75%;height:5px;margin:0 auto;padding:0;display:block;overflow:hidden }#search{border:0 solid rgba(63,63,63,.8);position:fixed;top:0;right:0;left:0;background:#fff;color:#000 !important}#searchform{color:#111;width:100%;max-width:1078px;margin:0 auto;overflow:hidden;position:relative }.search-button,.search-button:hover{display:none;clear:both;background:0 0;border:0;fill:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:25px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700 }.search-button:active{border:0 0;outline:0 0;background:0 0 }#search-form{border:none;overflow:hidden;background-color:transparent;width:93%;height:45px;line-height:45px;padding:0;-moz-box-sizing:border-box;box-sizing:border-box;border:0 0;font-weight:400;text-align:center;font-size:16px;color:#444!important }#search-form{-webkit-box-sizing:border-box }#search-form:focus{border:0 0;outline:0;color:#fff }#searchform:focus{border:0 0;outline:0;color:#3f3f3f }#box{margin:21px auto;display:none;padding:0;width:100%;height:45px;position:fixed;top:48px;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:#fff; -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s }#hide span.smallbutton{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;width:40px;height:40px;line-height:40px;padding:0;border-radius:0;border:0 solid #fff;float:right;overflow:hidden;display:block;position:absolute;top:2px;right:35px }#hide span.smallbutton:hover{color:#fff;border-color:#fff }
.search-icon .icons{width: 24px;vertical-align:middle}
.search-button .icons{width:25px;padding:12px 0 0 }#hide span.smallbutton .icons{width:25px;vertical-align:middle}
@media only screen and (max-width:1080px){
#box{margin:0 auto;}}
@media only screen and (max-width:800px){#hide span.smallbutton{right: 5px;} #box{margin:0 auto;}}

5. Selesai. Sangat mudah kan.

Keterangan: Perhatikan bagian fill='#FFF' pada langkah ke 3. Bagian tersebut adalah warna tombol icon pencarianny. Silahkan ganti sesuai keinginan Anda.
Share
Previous
« Prev Post

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel