Skip to main content

5 Cara Cepat Membuat Kotak Pencarian di Blogger

BlogDola - 5 Cara Cepat Membuat Kotak Pencarian di Blogger - Pada dasarnya sebuah website yang professional harus mempunyai kotak pencarian , agar pengunjung bisa mencari apa yang dia butuhkan dan apa yang ia inginkan.




Perlu kalian ketahui Kotak Pencarian atau bisa disebut juga Search Box merupakan Gadget yang wajib dipasang oleh para publisher blogger, pasalnya fungsi dari kotak pencarian ini sangatlah bagus yaitu untuk memudahkan visitor mencari informasi yang mereka butuhkan di website kita.

5 Cara Cepat Membuat Kotak Pencarian di Blogger

1. Masuk ke Dashboard Blogger
2. Pilih menu Tata Letak → Tambahkan Gadget
3. Pilih HTML/JavaScript
4. Copy dan Pastekan kode kotak pencarian
5. Simpan

Kode Kotak Pencarian Pertama

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
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="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
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>

Kode Kotak Pencarian Ketiga

<style type="text/css">
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;
    border: 1px solid #dddddd;
    padding: 5px;
    font-size: 12px;
 background-color: #ffffff;
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
    padding: 0 0 0 4px;
    line-height: 2em;
    height: 2em;
    outline: none;
    background: transparent;
    color: #000000;
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
 padding: 0 5px;
    margin: 0;
    position: absolute;
    right: 5px;
    top: 5px;
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
 border: none;
 min-width: 2em;
 color: #000000;
    background: #ffffff;
}
html[dir="rtl"] button#_bcd_141013_search_submit {
 right: auto;
 left: 5px;
}
</style>
<form action='/search' id='_bcd_141013_search_form' method='get'>
 <input id='_bcd_141013_search_text' name='q' value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" type='text'/>
 <button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button>
</form>

Sekian informasi yang saya berikan tentang 5 Cara Instan Membuat Kotak Pencarian di Blogger semoga bermanfaat bagi pengunjung dan kita semua.