Edi Prasetyo Pada 10/27/2019 Cara membuat custom search form di blogspot

Baca Juga

Advertidement

Form pencarian pada sebuah blog atau web sangatlah penting, karena dengan adanya form pencarian kita bisa mencari artikel dengan hanya mengetikan judul yang ingin kita cari layaknya seperti saat kita mencari sesuatu di google. Nah, disini edikomputer kembali mencoba memberikan tutorial cara membuat form pencarian di blogspot.

Kita akan mencoba membuat form pencarian ini secara sederhana, Oke pertama silahkan buka blogger kalian lalu pilih

1. menu Tata Letak, 
2. kemudian tambahkan Gadget 
3. pilih tipe html/javascript

Lihat Gambar di bawah ini

lalu pada kolom judul kosongkan saja pada kolom konten isi dengan kode html di bawah ini

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

lalu simpan, selanjutnya pilih menu tema, klik vertical dotted yang ada di kanan atas, lalu pilih Edit HTML
kemudian cari kode

 
]]>

lalu copy kode css ini di atasnya

 
.search-box
{
  position:relative;
  margin:10px auto;
  padding:0px;
  width:80%
}
#search-form
{
  height:40px;
  border:1px solid #ddd;
  border-radius:4px;
}
#search-text
{
  font-size:14px;
  color:#333;
  border-width:0;
  background:transparent;
  line-height:15px;
}
.search-box input[type="text"]
{
  width:80%;
  padding:10px 0 5px 1em;
  color:#333;
  outline:none;
  border:1px solid #000;
}
#search-button
{
  position:absolute;
  top:0px;
  right:10px;
  height:40px;
  width:80px;
  color:#fff;
  text-align:center;
  border-width:0;
  background-color:#e44b3b;
  cursor:pointer;
  text-transform:uppercase;
  border-radius:0 3px 3px 0;
  outline:0;
}
#search-button:hover
{
  background:#333
}

 

Setelah itu simpan template dan lihat hasilnya. Oke mungkin ini saja artikel yang saya berikan pada kesempatan kali ini, mudah mudahan bermanfaat dan salam blogging selalu.

Advertidement

Related Posts