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-Search-Box-Keren-Pada-Blog
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.
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 :

Artikel Lainnya

Previous
Next Post »
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

1 comment

- Komentar yang relevan
- Dilarang SPAM
- Apabila ada pertanyaan silahkan masuk ke laman contact
- Terima kasih karena sudah berkomentar