Cara Membuat Widget Search Box Pada Blogger

Cara Membuat Widget Search Box Keren Blogger - saya akan share salah satu trik buat teman-teman Blogger. Trik ini sangat cocok buat anda yang sedang memodifikasi tampilan blog / web anda. Search Box, sudah tahu kan? Buat yang belum tahu, ini penjelasannya. Search Box adalah sebuah alat yang digunakan untuk mempermudah pengunjung dalam mencari artikel yang diinginkan pada sebuah blog / web sesuai dengan keyword yang dimasukkan.

Setelah mengerti tentang Search Box, sekarang kita bahas bagaimana cara memasang widget Search Box tersebut. Silahkan disimak !

1. Login ke Blogger
2. Masuk Dashboard --> Tata Letak
3. Klik "Tambahkan Gadget"
4. Klik "HTML/JavaScript"
5. Tampilannya sebagai berikut :

• Pada no.1 (kolom Judul), dibiarkan kosong saja. Kalau mau diberi keterangan, silahkan.
• Pada no.2 (kolom Konten), masukkan kode yang telah saya sediakan.
• Pada no.3, klik "Simpan" jika no.1 dan no.2 selesai dilakukan.
• 
  Adapun scriptnya sebagai berikut :
  
  
  Widget Search Box 1 :
  
  
  Copy Di bawah Ini :::
  
  
  <!-- KODE KOTAK PENCARIAN FLEKSIBEL  -->
  <style>
  #search-box {
  position: relative;
  width: 100%;
  margin: -15px 0px -20px 0;
  }
  
  #search-form
  {
  height: 40px;
  border: 1px solid #999;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
  }
  #search-text
  {
  font-size: 14px;
  color: #ddd;
  border-width: 0;
  background: transparent;
  }
  
  #search-box input[type="text"]
  {
  width: 90%;
  padding: 11px 0 12px 1em;
  color: #333;
  outline: none;
  }
  
  #search-button {
  position: absolute;
  top: 0;
  right: 0;
  height: 42px;
  width: 80px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  line-height: 42px;
  border-width: 0;
  background-color: #4d90fe;
  -webkit-border-radius: 0px 5px 5px 0px;
  -moz-border-radius: 0px 5px 5px 0px;
  border-radius: 0px 5px 5px 0px;
  cursor: pointer;
  }
  </style>
  
  <div id='search-box'>
  <form action='/search' id='search-form' method='get' target='_top'>
  <input id='search-text' name='q' placeholder='Search here...' type='text'/>
  <button id='search-button' type='submit'><span>Search</span></button>
  </form>
  </div> 
  
  
  
  Widget Search Box 2 :
  
    Copy Di Bawah Ini :
  
  
  <form action="/search" style="display:inline;" method="get">
  <input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
  </form>
  <style>
  #s {
      margin: 0 auto;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 12px 48px 12px 12px;
      -webkit-border-radius: 200px;
      -moz-border-radius: 200px;
      border-radius: 200px;
   width: 200px;
      height: 16px;
      color: #3a4449;
      border: none;
      outline: none;
      -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
      -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
      box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
   position: relative;
      z-index: 2;
      background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj914uoXki8McV3GuCNa2NX43-YopBMIzyHxfI6_y5hKuKXxjCX3HscSsBvGSckiF51-1Ji5LJAEQoVhabAh8WKu7m8k45HP7ScY4hJGGCFwGYaMJ-fvWwg4d5dgVytmwf7RoYeGKtfdlI/s1600/Search.png) center right no-repeat;
  }
  #s::-webkit-input-placeholder, #s:-moz-placeholder {
      color: #607078;
  }
  </style>
  
  
  
  
  
  
  
  Terima kasih telah membaca artikel ini. 

Tweet