Cara Membuat Widget Search Box Keren Pada Blog |
Masuk Akun Blogger
1. Pilih tab tata letak.
2. Klik Add Widget, lalu pilih Html/Javascript lalu salin script dibawah ini:
<div id='search-box'> <form action='/search' id='search-form' method='get' target='_top'> <input id='search-text' name='q' placeholder='Search Here...' type='text'/> <button id='search-button' type='submit'><span><i class='fa fa-search'/></i></span></button> </form> </div>3. Simpan script diatas pada widget yang anda tambahkan tadi.
4. Lalu masuk ke tab edit html
5. Klik edit html, Lalu salin script dibawah ini tepat di atas </head>
#search-box { position: relative; width: 130%; margin: -15px 0px -20px 0; } #search-form { height: 42px; border: 1px solid #999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #fff; overflow: hidden; } #search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; } #search-box input[type=&amp;amp;amp;amp;amp;amp;quot;text&amp;amp;amp;amp;amp;amp;quot;] { width: 90%; padding: 11px 0 12px 1em; color: #333; outline: none; } #search-button { position: absolute; top: 0; right: 0; height: 42px; width: 50px; font-size: 14px; color: #fff; text-align: center; line-height: 42px; border-width: 0; background-color: #1E90FF; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; cursor: pointer; }6. Simpan template, dan lihat hasilnya. Semoga berhasil dan cara ini adalah langkah terakhir.
Sekian artikel ini tentang Cara Membuat Widget Search Box Keren Pada Blog. Semoga artikel ini dapat bermanfaat bagi Anda blogger. Masih banyak tutorial dan tips lainnya di tutorialku18 ini selamat belajar blogging dari blog ini.
Baca Juga :
- Tips Memasang Fanspage Facebook Pada Blog
- Cara Membuat Menu Pada Blog Mengikuti Saat di Scroll ke Bawah
- Cara Mudah Mengetahu ID Nav Class Pada Menu Blog