Cara Membuat Kotak Pencarian di Sidebar Blog

 on Friday, July 1, 2016  

Cara Membuat Kotak Pencarian di Sidebar Blog
ADA yang terlewat di Panduan Setting Jurnalistik Theme, yaitu Cara Membuat Kotak Pencarian di Sidebar Blog.

Search Box merupakan elemen penting yang wajib dipasang di blog, agar blog kita User Friendly.

Kotak Pencarian ini memudahkan pengunjung mencari artikel atau info yang mereka butuhkan.

Langsung saja, ini dia Cara Membuat Kotak Pencarian di Sidebar Blog:

Kotak Pencarian

1. Layout > Add a Gadget ATAU Edit HTML/Javascript (kalo gak salah sudah ada tuh)
2. Judul kosongkan
3. Copas Kode Kotak Pencarian berikut ini di kolom Content:

<!-- SEARCH BOX START -->
<style>
#search-box {position: relative;width: 300px;margin:-10px 0 0 0;}
#search-text {
    font-size: 13px;
    border-width: 0px;
    background: transparent none repeat scroll 0% 0%;
    color: rgb(0, 0, 0);
    padding: 7px;
}
#search-form {
    height: 29px;
    background-color: #FAFAFC;
    overflow: hidden;
    border: 1px solid rgb(221, 221, 221);
}
#search-box input[type=&quot;text&quot;]
{width: 100%;padding: 8px 0 1px 10px;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 30px;width: 80px;font-size: 13px;color: #fff;text-align: center;line-height: 30px;border-width: 0;background-color: #4d90fe;cursor: pointer;}
</style>
<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>Search</span></button>
</form>
 </div> 
<!-- SEARCH BOX END -->


4. Save!

Kini Kotak Pencarian sudah ada di Sidebar Blog Anda. Anda juga bisa menggunakan kode kotak pencarian lain. (http://jurnalistiktheme.blogspot.com).*



4 comments:

  1. sorry gan komen nya tadi,,,,tadi saya kira lagi di halaman DEMO template yg ada di blog ini,,,,tadi pengen ngetest commnet nya lol....sory ya....sorry banget nih

    ReplyDelete
  2. Navigasi di bawah postingannya gk ada gan

    ReplyDelete

J-Theme