Cara Memasang Kode Kotak Pencarian Blog Responsive

Cara Memasang Kode Kotak Pencarian Blog Responsive

Berikut ini Kode Kotak Pencarian Blog Responsive. Cara memasangnya sangat mudah. Disebut responsive karena ramah seluler (mobile-friendly).

Cara Memasang Kode Kotak Pencarian Blog Responsive

1. Layout > Add a Gadget
2. Judul Kosongkan
3. Copas kode berikut ini di kolom konten

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button></form>
</div>
<style>
#search-box {position: relative;margin: 0 auto;border: 1px solid #eaeaea;padding: 0;margin-bottom: 15px;}
#search-form{height:40px;background-color:#fff;overflow:hidden}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent;line-height:15px}
#search-box input[type="text"] {width: 70%;padding: 13px 0 15px 1em;outline: none;}
#search-button {position: absolute;height: 40px;width: 80px;color: #fff;text-align: center;border-width: 0;background-color: #c70303;cursor: pointer;outline: 0;top: 0;right: 0;padding: 0;}
#search-button:hover{background:#48d}
</style>

4. Save!
Demikian Cara Memasang Kode Kotak Pencarian Blog Responsive.*