Cara Membuat Kotak Pencarian Pada Blog

Cara membuat kotak pencarian - Search box atau kotak pencarian adalah hal yang wajib ada dalam sebuah blog,  karena dengan adanya kotak pencarian dapat memudahkan pengunjung untuk menemukan artikel-artikel atau postingan yang ada pada blog kita. Memiliki fungsi yang hampir sama dengan mesin pencari google,
mesin ini dapat mempermudah untuk mencari data-data yang kita butuhkan. Sebelumnya blogger juga telah menyediakan gadget untuk kotak pencarian dalam blog dan caranya pun terkesan sangat mudah, yaitu tinggal masuk ke layout => Add gadget => pilih gadget ''Search box'' atau '' kotak pencarian '' dan Save. Namun jika kurang berkenan dengan tampilan kotak pencarian versi blogger tentu ada cara lain yang dapat kita terapkan untuk membuat kotak pencarian yang sesuai dengan apa yang kita inginkan. Ada banyak cara untuk membuat kotak pencarian diluar versi blogger entah dengan edit html atau tanpa edit html, dan kali ini kita akan membahas yang mudah saja ya gan hehehehe.. yah, benar kita akan bikin kotak pencarian tanpa edit html jreng...jreng...jreng. Oke langsung saja kita menuju ke TKP dalam topik ''cara membuat kotak pencarian pada blog ''.

•  Silahkan log in ke akun blogg => masuk ke layout (tata letak) => Add gadget
• Pilih Tambahkan HTML/java script => Copy kode di bawah ini :

• <style>
      #searchbox {
      width: 280px;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiePxzN3xsmLe0nBsztd1omp27Hszv_G3YX_kOD-JfE7D_N4_IWYMazchlqsQzKaEPLLaPWF0j1guMK-9ROqMci51PLkZ7d7Ny1v2O0kucsZ6lSilH6JA1qw9HNkRpnJeA25SoUQV99NPVE/s1600/search-box.png) no-repeat;
      }
  
      #searchbox input {
          outline: none;
      }
  
      input:focus::-webkit-input-placeholder {
          color: transparent;
      }
  
      input:focus:-moz-placeholder {
          color: transparent;
      }
  
      input:focus::-moz-placeholder {
          color: transparent;
      }
      #searchbox input[type="text"] {
      background: transparent;
      border: 0px;
      font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
      font-size: 14px;
          color: #0000FF !important;
          padding: 10px 35px 10px 20px;
          width: 220px;
      }
      #searchbox input[type="text"]:focus {
      color: #fff;
      }
  
      #button-submit{
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP9OQkyRbGPe0uadIE_d4LruPMIXf1hdR4LrVgWGcGL0Z4ONne8lpDWbGknF2NXd_kuEr9lVWrrG-ygtx3LpK3mS13ZPYVv-ngRB8hvyDml0WgVXX8nM28G-jT9PFTSAEy4zPGWaC2qA9i/s1600/search-icon.png) no-repeat;
      margin-left: -40px;
      border-width: 0px;
      width: 40px;
      height: 50px;
      }
  
      #button-submit:hover {
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikzgUxD5R3uuqfQ1IpqJhTV4ZUKf8PgN9mwwXRiFLyelYLR6xGLoQudb1PsioApMEj4psSwEzn83szDgUe65A1jsMKJ8aXhFpwVAqEOG2BhPDUas_MAXOIoJdjXpc_HcwYta1raYTRgVJh/s1600/search-icon-hover.png);
      }
      </style>
  
      <form id="searchbox" method="get" action="/search" autocomplete="off">
      <input name="q" type="text" size="15" placeholder="Enter keywords here..." />
      <input id="button-submit" type="submit" value=" "/>
      </form>

• Selesai, silahkan simpan dan lihat hasilnya.

Itulah cara membuat kotak pencarian yang paling sederhana (versi saya) dan walaupun terkesan sederhana namun dapat mempermudah pengunjung untuk mencari artikel/postingan pada blog.