Cara Mudah Memasang Kotak Pencarian di Blog

loading...

Selamat datang di The Royal Moringa. Pada kesempatan kali ini, kita akan membahas  mengenai bagaimana cara memasang kotak pencarian pada blog atau website anda. Apa gunanya? Kotak pencarian atau search box akan membantu seseorang untuk mencari suatu postingan yang mereka kehendaki. Mereka cukup mengetikkan beberapa kata dan menekan tombol cari/search, kemudian mereka akan langsung diarahkan pada suatu halaman yang berisi artikel/postingan yang terkait. Berikut adalah 2 cara mudah untuk menambahkan kotak pencarian di blog atau website anda.

Basic Search Box

Basic Search Box adalah kotak pencarian yang paling umum digunakan oleh semua pengguna blog karena fitur ini telah ditambahkan oleh Google sehingga anda tinggal memakainya saja.

Berikut beberapa langkah mudah untuk menambahkan basic search box tersebut.

1. Log in ke akun blog anda > Pada dashboard pilih Layout > Pilih posisi dimana anda akan meletakkan widget > Add a gadget > pilih Blog Search 

                                 

2. Pada bagian Title/Judul, ketik teks yang akan ditampilkan pada kotak pencarian misalkan cari disini, temukan artikel anda, ketik yang anda cari, dan lain sebagainya

3. Save dan lihat hasilnya

Custom Search Box

Bagi anda yang menginginkan tampilan yang lebih menarik dan elegan, anda dapat menggunakan Custom Search Box yang kita sediakan khusus bagi anda.

Berikut beberapa langkah mudah untuk menambahkan custom search box tersebut.
 
1. Log in ke akun blog anda > Pada dashboard pilih Layout > Pilih posisi dimana anda akan meletakkan widget > Add a gadget > pilih HTML/JavaScript  

2. Silakan anda copy dan paste kode HTML berikut

                                            <style type="text/css"> #searchbox { min-width: 250px; margin: 10px auto; border-radius: 3px; overflow: hidden; max-width: 300px; } #input { width: 59.2%; padding: 10.5px 4%; font: bold 15px "lucida sans", "trebuchet MS", "Tahoma"; border: none; background-color: #eee; } #input:focus { outline: none; background-color: #fff; box-shadow: 0 0 2px #333333 inset; } #submit { overflow: visible; position: relative; float: right; border: none; padding: 0; cursor: pointer; height: 40px; width: 32.8%; font: bold 15px/40px "verdana", "arial", "Tahoma"; color: #fff; text-transform: uppercase; background-color: #ffc200; } #submit::before { content: ""; position: absolute; border-width: 8px; border-style: solid solid solid none; border-color: transparent #ffc200; top: 12px; left: -6px; } #submit:focus, #submit:active { background-color: #f8bd00; outline: none; } #submit:focus::before, #submit:active::before { border-color: transparent #f8bd00; } #submit:hover { background-color: #f2b800; } #submit:hover::before { border-color: transparent #f2b800; } </style> <form id="searchbox" action="/search" method="get"> <input type="text" id="input" name="q" placeholder="search here" /> <input type="hidden" name="max-results" value="8" /> <button id="submit" type="submit">Search</button> </form>       
                          

3. Save dan lihat hasilnya

Penggunaan kotak pencarian dapat memberikan nilai tambah pada blog atau website anda karena fitur ini mempermudah pembaca untuk mencari topik yang dikehendaki. Masih banyak situs yang tidak memiliki kotak pencari sehingga kita sering menjumpai kesulitan jika ingin mencari sesuatu pada situs tersebut. Semoga tutorial kali ini dapat membantu anda menambah kotak pencari di blog. Terima kasih telah membaca.

loading...