Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Search Box Responsive Seperti Igniplex

Search box

Search box merupakan kotak pencarian yang terdapat pada sebuah situs atau web yang bertujuan untuk memudahkan pengunjung dalam mencari atau menemukan artikel tertentu. Search box ini wajib ada pada sebuah situs atau blog yang sudah memiliki banyak konten atau artikel di dalamnya.

Memang dalam setiap template sudah disediakan fitur search box, tetapi mungkin kalian ingin mencoba mendesain sendiri supaya berbeda dari biasanya. Oleh karena itu saya akan membagikan tutorial cara membuat search box mirip igniplex.

Tutorial yang akan saya jelaskan di bawah ini untuk pengguna VioMagz. Kalian juga bisa memasangnya pada template lain asalkan kalian bisa mengubah dan menyesuailkan kodenya sendiri.

Cara Membuat Search Box Responsive Seperti Igniplex

1. Masuk ke dashboard blogger kalian

2. Klik pada menu Tema => Edit HTML

3. Silahkan cari kode dibawah 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>

4. Lalu ganti kode tersebut dengan kode dibawah ini

<div class='teknsearch'> <form action='/search' class='search' method='get'> <input class='check' id='teknsearch' type='checkbox'/> <input class='input' name='q' placeholder='Ketik dan Enter' type='text'/> <label class='icon' for='teknsearch'> <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. Cari kode ]]></b:skin> dan letakkan kode berikut ini tepat diatasnya

/* Igniplex Search Box by Smarth Tekno */
.teknsearch .search .input { z-index: 10; } .check{display:none} .teknsearch{ position:absolute; right:0px; top:0px; bottom:0px; } .teknsearch svg{ width:24px; height:24px; } .teknsearch svg path{ fill:#fff; /* Warna icon search */ } .teknsearch .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; } .teknsearch .search .icon{ position:absolute; top:8px; right:8px; border-radius:25px; padding: 4px; transition:all .5s ease; cursor: pointer; z-index: 100; } .teknsearch .search .icon .open{ display:block; } .teknsearch .search .icon .close{ display:none; } .teknsearch .search .check:checked ~ .input, .teknsearch .search .input:focus{ padding:0px 40px 0px 15px; width:calc(940px - 115px); } .teknsearch .search .check:checked ~ .icon .open{ display:none; } .teknsearch .search .check:checked ~ .icon .close{ display:block; position:relative; right:2px; } .teknsearch .search .check:checked ~ label:hover{ background-color:transparent !important; } .teknsearch .search .check:checked ~ .icon > svg path{ fill:#000; /* Warna icon close */ } @media screen and (max-width: 600px) { .teknsearch .search .check:checked ~ .input, .teknsearch .search .input:focus { width: calc(100vw - 115px)!important; z-index: 2;}}

6. Kemudian tekan simpan dan selesai

Demikianlah tutorial Cara Membuat Search Box Responsive Seperti Ingniplex. Semoga Bermanfaat.