Cara Instan Membuat Kotak Pencarian di Blogger

ADDSITE01 - Cara Instan 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.

Kotak Pencarian atau bisa disebut juga Search Box merupakan Gatget yang wajib dipasang oleh para blogger, pasalnya fungsi dari kotak pencarian ini sangatlah bagus yaitu untuk memudahkan pengunjung mencari informasi yang mereka butuhkan di blog kita.

Cara Instan 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

<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>

<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 Cara Instan Membuat Kotak Pencarian di Blogger semoga bermanfaat bagi pengunjung dan kita semua.

Share this post