cara membuat tombol search di blog sudah banyak yang membuat nya tetapi apa salah nya juga saya ikutan aja iya !!
tombol share yang saya share ini bisa di lihat di blog ini untuk privew nya ,
langkah pembuatan nya
- login ke blogger kalian
- klik template & edit HTML
- lalu cari code .breadcrumbs tekan ctrl + f untuk mempermudah pencarian
- copy css di bawah dan pastekan tepat di atas .breadcrumbs
#search-box { position: relative; width: 250px; margin: 0px 35px 15px 0px; float: right; }
#ajax-search-form { height: 28px; border-radius: 2px; background-color: #fff; overflow: hidden; border: #dfdfdf solid 1px; border-radius: 4px; }
#search-text { font-size: 12px; color: #ddd; border-width: 0; background: transparent; }
#search-box input[type="text"] { width: 90%; padding: 5px 20px 12px 10px; color: #666; outline: none; } #search-button { position: absolute; top: 14px; right: 4px; height: 32px; width: 20px; margin-top: 10px; font-size: 14px; color: #fff; text-align: center; line-height: 0; border-width: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRL0bS-yiWd5dKGNQUQ1c02LfKApSTXRLvUO3wRDKaQHpn5DwwOJl-j9FR59qW-4Law8nCpDMvYKvAbO9KFEpEyfBvqCqow0Zxm9JbprZ8vccMQSMI4KK2th4WsJRednukGOIgHbWUpkI/s1600/search-icon.jpg) no-repeat; cursor: pointer; }
#search-result { border: #ecf0f1 solid 1px; background-color: #2c3e50; padding: 15px 20px; position: absolute; top: 50px; right: 0; z-index: 99; display: none; border: none; width: 275px; }
#search-result * { margin: 0 0 0 0; padding: 0 0 0 0; } #search-result h4 { margin: 0 30px 10px 0; color: #ecf0f1; }
#search-result ol { margin: 0 0 10px 28px; color: #ecf0f1; }
#search-result .close { display: block; position: absolute; top: 0px; right: 10px; line-height: normal; font-size: 30px; }
lalu copy code di bawah ini dan pastekan tepat di atas code
</header>
<div id='search-box'>
<form action='/search' id='ajax-search-form' method='get'>
<input id='search-text' name='q' placeholder='Cari artikel di blog ini...' type='text'/>
<button id='search-button' type='submit'/>
</form>
</div>
jika sudah klik simpan dan lihat hasilnya
di harapkan jika memberi komentar
