Beautiful Responsive Search Box Widget for Blogs and Websites

Search box merupakan salah satu fitur penting dalam sebuah situs, yang berguna untuk memudahkan pengunjung situs mencari konten artikel yang mereka inginkan.

Tutorial Blog: Cara Membuat Search Box Responsive

Instalasi

Masuk Blogger: Tema > Edit HTML

Tambahkan kode berikut ini sebelum kode ]]></b:skin> atau </style>

#search-box {
position: relative;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
#search-form {
height: 40px;
border: 2px solid orange; /*! edit warna */
background-color: #fff; /*! edit warna */
overflow: hidden;
}
#search-text {
font-size: 14px;
color: #fff;
border-width: 0;
background: transparent;
}
#search-box input[type=&quot;text&quot;] {
width: 100%;
padding: 9px 0 12px 1em;
color: #000; /*! edit warna */
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 40px;
width: 40px;
font-size: 16px;
color: aqua; /*! edit warna */
text-align: center;
border: 2px solid yellow; /*! edit warna */
background-color: #000; /*! edit warna */
cursor: pointer;
}

Selanjutnya tambahkan kode HTML berikut ini pada widget blog atau di bawah kode <body>

<div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
  <input id='search-text' name='q' placeholder='Search..' type='text'/>
  <button id='search-button' type='submit'>
  <span><i class='fa fa-search'/></span>
  </button>
  </form>
  </div>

Sesuaikan dengan keinginan tata letak kamu.

Tambahan

Tambahkan Font Awesome berikut ini setelah kode <body>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>

Jika sudah ada, bisa diabaikan

Simpan Tema