4/04/2016

Cara Membuat Kotak Pencarian dalam HTML Blog

Cara Membuat Search Bar Blog Search blog merupakan salah satu fitur penting dalam sebuah blog apalagi blog tersebut telah memiliki banyak artikel boleh dikata telah mencapai ratusan bahkan sampai ribuan postingan. Dengan adanya kotak untuk mencari artikel ini pengunjung akan lebih mudah dalam proses pencarian artikel dalam blog itu sendiri.


gambar kotak pencarian sederhana dalam html
Ilustrasi kotak pencarian dalam HTML Blog

Cara Membuat Kotak Pencarian di Blog
Berikut langkah-langkahnya dalam pembuatan search (kotak pencarian) tersebut
  1. Buka blog anda dan klik pada Template lalu pilih Edit HTML
  2. Letakkan kode ini tepat diatas </style>
    1. /*Seach Box*/
      #searching{float:right}
      #searching input[type=&quot;text&quot;]{border:0;padding:10px;background:#fff;font-weight:bold;color:#666;font-size:13px;margin:0;outline:none}
      #search-buttons{padding:5px;overflow:hidden;text-align:right;margin:0}
      #search-button-top{background-image:url(&quot;http://3.bp.blogspot.com/-60fYApN0j2M/Ub8uXOv4rNI/AAAAAAAACBs/6PDa4uu3cHk/s1600/csg-51bf2d6764c79.png&quot;);background-repeat:no-repeat;margin:0;outline:none;height:36px;width:40px;background-color:#e74c3c;background-position:13px -243px;border:none;float:right;cursor:pointer}
      #search-button-top:hover{-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;transition:all .2s ease-in;background-color:#c0392b}
      #searching{float:right}
  3. Copy Paste Kode dibawah ini dan letakkan sesuai dengan keinginan anda (setiap template berbeda-beda)
    1. <div id='searching'>
      <form action='/search' id='search-buttons' method='get'>
      <input name='q' placeholder='Cari Disini.....' type='text'/><input id='search-button-top' type='submit' value=''/></form>
      </div>
  4. Simpan dan lihat hasilnya
Sekian cara membuat search bar di blog semoga dapat menambah wawasan anda dalam koding blog. 

MaxAndro.com (ex. androsoftware.xyz) Silahkan berkomentar dengan baik, asal tidak melanggar peraturan dibawah ini.
1. NO SPAM
2. NO SARA
3. NO LINK AKTIVE

Terimakasih

Admin MaxAndro
EmoticonEmoticon