Cara Membuat Kotak Pencarian dalam HTML Blog

Cara Membuat Kotak Pencarian 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.

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>

/*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)

<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.