Cara Membuat Widget Search Box Keren Pada Blog

tutorialku18 - Cara membuat widget search box keren Pada Blog, Membuat widget search box atau widget kotak pencari merupakan suatu hal yang sangat penting bagi setiap element pada blog. Apa fungsinya ? jangan tanya apa fungsinya karena Anda pasti tahu benar apa fungsi dari widget ini ? yups adalah untuk memudahkan orang mencari artikel yang mereka (pengunjung) cari di sebuah blog. Memang ada widget search box yang sangat sederhan tinggal klik, Namun apa salahnya kalau kita membuat nya lebih semenarik mungkin agar blog terlihat keren. Baiklah pada kesempatan kali ini saya akan memberikan tutorial blog berupa bagaimana cara membaut widget search box keren di blog ? berikut langkahnya.

Cara Membuat Widget Search Box Keren Pada Blog

Berikut adalah cara agar dapat membuat widget keren ini. Yang harus kamu lakukan adalah masuk ke akun blog kamu.

• Membuat Widget Recent Post Sederhana di 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;amp;quot;text&amp;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

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Artikel Lainnya