» » » Cara membuat Kolom Search/Pencarian Simple and Responsive

Cara membuat Kolom Search/Pencarian Simple and Responsive

0 Viewers ,
Kolom Search. Berikut ini saya akan berbagi cara membuat kolom pencarian yang simple dan yang pasti Responsive!. Kolom Search adalah salah satu emelem UI yang paling penting dihalam web. Banyak sekali manfaat kotak pencarian ini buat website anda. Sebuah kotak pencarian pada halaman web melakukan fungsi yang sama dengan mbah google yang memungkinkan pengguna untuk mencari konten atau katergori yang sudah ada di blogger kita. Kolom Search ini adalah kebutuhan pokok diwebsite, karena fungsinya memudahkan pengunjung mencari apa yang dicari. Dalam tutorial ini saya akan berbagi cara membuat kolom search yang Simple dan Responsive. Jika anda suka dengan kolom search yang simple ini ikuti langkah-lagkah berikut ini setelah saya memberikan screenshoot.

Screenshoot:
Cara pertama:1. Login dan Masuk ke Blogger/
2. Tata Letak -> Pilih bagian Sidebar -> Add Gadget HTML/Java Script.
3. Copy-Paste kode berikut ini!

<div id="_bcd_141013" style="display:none"></div>
<style type="text/css">
form#_bcd_141013_search_form {
    position: relative;
    display: block;
    clear: both;
    float: none;
  
    border: /*border-width-s*/1px solid;/*border-width-e*/
    border-color: /*border-color-s*/#dddddd;/*border-color-e*/
    padding: /*padding-s*/5px;/*padding-e*/
    font-size: /*font-size-s*/12px;/*font-size-e*/
    background-color: /*bg-color-s*/#ffffff;/*bg-color-e*/
}
input#_bcd_141013_search_text {
    width: auto;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 2em;
    height: 2em;
    outline: none;
    background: transparent;
  
    color: /*text-color-s*/#000000;/*text-color-e*/
}
button#_bcd_141013_search_submit:hover {
    opacity: 0.8;
}
button#_bcd_141013_search_submit {
    width: auto;
    padding: 0 /*padding-s*/5px;/*padding-e*/
    margin: 0;
    position: absolute;
    right: /*padding-s*/5px;/*padding-e*/
    top: /*padding-s*/5px;/*padding-e*/
    line-height: 2em;
    height: 2em;
    text-align: center;
    cursor: pointer;
    border: none;
    min-width: 2em;
  
    color: /*submit-text-color-s*/#000000;/*submit-text-color-e*/
    background: /*submit-bg-color-s*/#f0f0f0;/*submit-bg-color-e*/
}
html[dir="rtl"] button#_bcd_141013_search_submit {
    right: auto;
    left: /*padding-s*/5px;/*padding-e*/
}
</style>

<form action='/search' id='_bcd_141013_search_form' method='get'>
    <input id='_bcd_141013_search_text' name='q' placeholder="Search..." data-placeholder-end="" type='text'/>
    <button type="submit" id="_bcd_141013_search_submit"><i class="fa fa-search"></i></button><!--endofsearsubmit-->
</form>

<script type="text/javascript">
/*
Name: Natural Search Box with Multi Design
Author: Tien Nguyen
Site: http://www.sneeit.com/
Version: 1.0
License GNU
*/
var ss = document.getElementsByTagName('link');
for (var i = 0; i < ss.length; i++) {
    var href = ss[i].getAttribute('href');
    if (href && href != null && href.indexOf("font-awesome/") != -1) {
        break;
    }
}
if (i >= ss.length) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";
}
document.getElementsByTagName("head")[0].appendChild(link);


</script>

<!--
BLOGGER-WIDGET-OPTIONS
"Border Width": {
    "start": "/*border-width-s*/",
    "end": "px solid;/*border-width-e*/",
    "default": "1",
    "desc": "Border width of search box."
},
"Border Color": {
    "start": "/*border-color-s*/",
    "end": ";/*border-color-e*/",
    "default": "#dddddd",
    "type" : "color",
    "desc": "Border color of search box"
},
"Padding": {
    "start": "/*padding-s*/",
    "end": "px;/*padding-e*/",
    "default": "5",
    "desc": "Padding of search box. Allow integer only."
},
"Font Size": {
    "start": "/*font-size-s*/",
    "end": "px;/*font-size-e*/",
    "default": "12",
    "type" : "number",
    "desc": "Search text font size in pixel"
},
"Background Color": {
    "start": "/*bg-color-s*/",
    "end": ";/*bg-color-e*/",
    "default": "white",
    "type" : "color",
    "desc": "Search box background color"
},
"Text Color": {
    "start": "/*text-color-s*/",
    "end": ";/*text-color-e*/",
    "default": "black",
    "type" : "color",
    "desc": "Search box text color"
},
"Padding": {
    "start": "/*padding-s*/",
    "end": "px;/*padding-e*/",
    "default": "5",
    "type" : "number",
    "desc": "Search text padding in pixel"
},
"Submit Button Background Color": {
    "start": "/*submit-bg-color-s*/",
    "end": ";/*submit-bg-color-e*/",
    "default": "#f0f0f0",
    "type" : "color",
    "desc": "Search box background color for submit button"
},
"Submit Button Text Color": {
    "start": "/*submit-text-color-s*/",
    "end": ";/*submit-text-color-e*/",
    "default": "black",
    "type" : "color",
    "desc": "Search box text color for submit button"
},
"Placeholder Text": {
    "start": "placeholder=\"",
    "end": "\" data-placeholder-end=\"\"",
    "default": "Search...",
    "desc": "Placerholder text for search box"
},
"Search Submit Text": {
    "start": "<button type=\"submit\" id=\"_bcd_141013_search_submit\">",
    "end": "</button>",
    "default": "<i class=\"fa fa-search\"></i>",
    "desc": "Search submit text and / or <a href=\"http://fontawesome.io/icons/\" target=\"_blank\">icon tags</a>"
}
BLOGGER-WIDGET-OPTIONS
-->

4. Simpan Gadget

Demikianlah Tutorial Blogger kali ini, Sekian dari saya, Semoga Bermanfaat!

Related Post