CARA MEMBUAT TOMBOL SEARCH DIBLOG

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.

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250