Selamat siang...
Pada kesempatan ini saya akan share kepada Anda yaitu bagaimana Cara Membuat Tombol Serach diblog. Semoga Anda tidak pernah bosan dengan saya karena saya ini hari mau membagikan trick yang sangat ditunggu-tunggu oleh teman-teman blogger semua, terutama yang memakai
Template Subculture Fix Responsive.
Tutorial cara membuat tombol search diblog ini sangat sederhana sekali, silahkan Anda simak langkah-langkah dibawah ini :
1. Login ke akun
Blogger Anda
2. Klik
Template Edit HTML
3. Kemudian tekan
CTRL+F cari kode
.breadcrumbs
4. Lalu tambahkan kode
CSS berikut ini tepat diatas kode
.breadcrumbs
Lebih jelas
lihat gambar dibawah ini
#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/AVvXsEgqoUxwwUHH3BOAGy9o7zimzie0LYvPVe3v7dRaUqmmMUD2khDME5T4jGKSFB9OdsvTMazpZTd_eWgIeWIt5LtcC7M0AyxhJCfDdKao08tVBeDWhEnHdeOPaXfnQgeR25l5g4h-GO590eQ/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; }
5. Kemudian letakkan kode
xml berikut ini tepat diatas
</header>
<div id='art-wrapper'/>
Lebih jelas
lihat gambar dibawah ini:
<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>
6. Klik
Save Template dan lihat hasilnya, bagaiman keren kan? hehehe..
Demikian artikel tentang
Cara Membuat Tombol Search diblog semoga tutorial ini bermanfaat dan bisa membantu Anda.
Blogger
Google+
Facebook
Twitter