Lihat Peta LokasiKlik/Tab Gambar

ELSA CAKE

Cek Karya Pekanbaru-ART

di Market Online berikut:

LihatKeberuntungan AndaDapatkan Door PrizeRp 500.000,-		VoucherBelanja& 1 kg emas

Membuat Widget Search Box

By

Karikatur Pekanbaru-ART

Membuat Widget Search Box

Apa manfaat dari Search Box (kotak pencarian)...?
Search Box dapat memudahkan para pembaca blog sebagai widget navigas atau membantu para pembaca blog untuk mengexplore/ mencari artikel yang dibutuhkan. Sehingga para pembaca terbantu dalam memudahkan pencarian artikel atau yang berkaitan dengan frasa kata yang mereka inginkan diblog tanpa harus berpindah keblog lain.

*
Cara memasang/membuat Widget Search Box

Anda dapat menambahkan Widget seperti biasa atau seperti langkah berikut ini:

Masuk Akun blog anda
Masuk tata letak lalu tambahkan widget HTML/ Javascript
Masukkan kode-kode berikut dibawah
Simpan

Search Box-1

Kode HTML:

<style>
    #searchbox {
        background: #d8d8d8;
        border: 4px solid #e8e8e8;
        padding: 20px 10px;
        width: 250px;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;
    }

    input:focus:-moz-placeholder {
        color: transparent;
    }

    input:focus::-moz-placeholder {
        color: transparent;
    }

    #searchbox input {
        outline: none;
    }

    #searchbox input[type="text"] {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnoA8ug4I3ajYIp-aTYAlS3ksZ8PCXfmjuE2napDEIyBfwpMs-WEeYKuWZfJDbRluMFMAmNWz3fcndsH9f8mLg2GOtNhQVrlxRti3laDzXNe2vob7hBMPwPR478tjGPpwYnOCUB7pov-75/s1600/search-dark.png) no-repeat 10px 6px #fff;
        border-width: 1px;
        border-style: solid;
        border-color: #fff;
        font: bold 12px Arial,Helvetica,Sans-serif;
        color: #bebebe;
        width: 55%;
        padding: 8px 15px 8px 30px;
    }

    #button-submit {
        background: #6A6F75;
        border-width: 0px;
        padding: 9px 0px;
        width: 23%;
        cursor: pointer;
        font: bold 12px Arial, Helvetica;
        color: #fff;
        text-shadow: 0 1px 0 #555;
    }

    #button-submit:hover {
        background: #4f5356;
    }

    #button-submit:active {
        background: #5b5d60;
        outline: none;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search">
    <input name="q" type="text" size="15" placeholder="Type here..." />
    <input id="button-submit" type="submit" value="Search" />
    </form>

Search Box-2

Kode HTML:

    <style>
    #searchbox {
    width: 240px;
    }
    #searchbox input {
        outline: none;
    }
    input:focus::-webkit-input-placeholder {
        color: transparent;
    }
    input:focus:-moz-placeholder {
        color: transparent;
    }
    input:focus::-moz-placeholder {
        color: transparent;
    }
    #searchbox input[type="text"] {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnoA8ug4I3ajYIp-aTYAlS3ksZ8PCXfmjuE2napDEIyBfwpMs-WEeYKuWZfJDbRluMFMAmNWz3fcndsH9f8mLg2GOtNhQVrlxRti3laDzXNe2vob7hBMPwPR478tjGPpwYnOCUB7pov-75/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
    border: 2px solid #f2f2f2;
        font: bold 12px Arial,Helvetica,Sans-serif;
        color: #6A6F75;
        width: 160px;
        padding: 14px 17px 12px 30px;
        -webkit-border-radius: 5px 0px 0px 5px;
        -moz-border-radius: 5px 0px 0px 5px;
        border-radius: 5px 0px 0px 5px;
        text-shadow: 0 2px 3px #fff;
        -webkit-transition: all 0.7s ease 0s;
        -moz-transition: all 0.7s ease 0s;
        -o-transition: all 0.7s ease 0s;
        transition: all 0.7s ease 0s;
    }
    #searchbox input[type="text"]:focus {
    background: #f7f7f7;
    border: 2px solid #f7f7f7;
    width: 200px;
    padding-left: 10px;
    }

    #button-submit{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuPr_cq9z5IbkHhTECctK5GVOsEWkQlBcYxo1RDjAnBlUqwsp1z-bGn1-kadwSegeb_KqHhzNX3l-wM7lMHr7MrTR3JDG3Gysoxbt9rfXx1jzxY3FCYNLImD75hFFPmZndDSzhXFVaYxv7/s1600/slider-arrow-right.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 43px;
    height: 45px;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="Enter keywords here..." />
    <input id="button-submit" type="submit" value=" "/>
    </form>

Search Box-3

Kode HTML:

  <style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl7wChPtFrXhvVxSdfTrix8oRuA_xaEkvHXaGapzsr8qSKtLdGC_LUGXrb4LN4Q0f-3_VjioBhXv6fcyggmmnMeH7nNoSf4MlmQZFVkKAnlwZk7u7JIvdqTthwvB5vStWH5hHdBzsSEuP7/s1600/searchbar.png) no-repeat;
        width: 208px;
        height: 29px;
    }
    input:focus::-webkit-input-placeholder {
        color: transparent;
    }
    input:focus:-moz-placeholder {
        color: transparent;
    }
    input:focus::-moz-placeholder {
        color: transparent;
    }
    #searchbox input {
        outline: none;
    }
    #searchbox input[type="text"] {
        background: transparent;
        margin: 3px 0px 0px 20px;
        padding: 5px 0px 5px 0px;
        border-width: 0px;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 12px;
        color: #828282;
        width: 70%;
        display: inline-table;
        vertical-align: top;
    }
    #button-submit {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnB-tV5SB0dc1-2RQapWJv_sWLc5a6cVYk6BtRLVOtoy3ImFJF8pdenImAeoGznhlV4p7ESz3y81dZ8ZbBZqkuhQPsx7JHgBx4FgkMuzCz9lXd_5sbOsH9xaLKiIvzUd7PVvfg_6UTOrUw/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-left: 10px;
        margin-top: 4px;
        width: 21px;
        height: 22px;
    }
    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOm8UIWEO0a2AqtD5Xz5yU90GRdAMzaeRCwDnwomXy25aznaBAI0YYXwZOPU3XYvnwhIyNL191x2eswgmDYVyablYRj2hzvXvq5muGEf9oBTKAEMEPIxop7Sj7qFKbMcp_mABJUBQu16su/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOm8UIWEO0a2AqtD5Xz5yU90GRdAMzaeRCwDnwomXy25aznaBAI0YYXwZOPU3XYvnwhIyNL191x2eswgmDYVyablYRj2hzvXvq5muGEf9oBTKAEMEPIxop7Sj7qFKbMcp_mABJUBQu16su/s1600/magnifier-hover.png) no-repeat;
        outline: none;
    }
    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
        <input name="q" type="text" size="15" placeholder="search..." />
        <input id="button-submit" type="submit" value="" />
    </form>

Search Box-4

Kode HTML:

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-k779NGUQ_RXi0BRb0BmI4XXWUhTxS_4Ippl28MmUJ28TS7uyGOVmGBgG3x-5YlsvfioBx9CkBLrke5Sg-6fgCNiuNpggLZb0RCIt-W1cuOtMKgm6olnGQHbxpbl7OeWAbyWaLeDpOk7S/s1600/search-box.png) no-repeat;
        height: 27px;
        width: 202px;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;
    }

    input:focus:-moz-placeholder {
        color: transparent;
    }

    input:focus::-moz-placeholder {
        color: transparent;
    }

    #searchbox input {
        outline: none;
    }

    #searchbox input[type="text"] {
        background: transparent;
        margin: 0px 0px 0px 12px;
        padding: 5px 0px 5px 0px;
        border-width: 0px;
        font-family: "Arial Narrow", Arial, sans-serif;
        font-size: 12px;
        font-style: italic;
        width: 77%;
        color: #828282;
        display: inline-table;
        vertical-align: top;
    }

    #button-submit {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkuZhRyMyegSxxXWiNf5KI9KFuYskXuab4O9SIIFRt1H2js3c8WrFayD1XL_h0RTm88_c1FIf7tFps8TBQDlG4E52WvpelSoQhecRzZZKdsm8lqqZrY5Z2WMi28v3hwM3iYJP1-Qf4HD3/s1600/search-button.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        width: 30px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0YwVNWr9iLlvOxjThCOHuArHPyKKabwcHch3fkliF2Lfui16VOx4EYR9FXK4vYhweOY9GhotilUwuRtNQ1FTMEcH8f7PpOBjH3YZYGenpjyfJO6BsWazg47tMkOLJzEUkYbpRaB7fZZgO/s1600/search-button-hover.png) no-repeat;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="search..." />
    <input id="button-submit" type="submit" value="" />
    </form>

Search Box-5

Kode HTML:

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIipjXy_6RzdP09ECe5lUvB7Alu-WRDuY1XU-yI3vaM3ZHRH_NpCPfj04dnVzxuF6Xt4lpSMasVQ1SO04_0RVZzLOgV0U9dzX9tM5r1juCXbv6A28j3MT4bddVikR530LPkuYhMurvvtL9/s1600/search-box1.png) no-repeat;
        width: 250px;
        height: 65px;
    }

    input:focus::-webkit-input-placeholder {
    color: transparent;
    }

    input:focus:-moz-placeholder {
    color: transparent;
    }

    input:focus::-moz-placeholder {
    color: transparent;
    }

    #searchbox input {
        outline: none;
    }

    #searchbox input[type="text"] {
        background: transparent;
        padding: 5px 0px 5px 20px;
        margin: 10px 15px 0px 0px;
        border-width: 0px;
        font-family: "Brush Script MT", cursive;
        font-size: 12px;
        color: #595959;
        width: 65%;
        font-weight: bold;
        display: inline-table;
        vertical-align: top;
    }

    #button-submit {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP0CylAVOH1RNW0kixfgm-FWKPPmZHcV8hoJ7Pl6bdzYH_eoc71n39fmTwA8cSt34rT-ha88EFGXvFQnJG8Qwpwq5ylVLEW98Fv_e42UO-MeZ5eIOhX_iTdnT1bFW3WzLZD6WTxUV-YAr4/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-top: 10px;
        width: 19px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFrBeYduOD_1DNgnFmWgFCF14CWZQ-5L5WsDof_reqFQRyTr6BLEtVBfa0EH7r_mJXGe3wuubjDX1wU-lHD55hSKfLCw0UJJFU9LKIdk5dwdbZ92m4ssGb6Btfo-_HvyxjNzIJgKdTnMgK/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFrBeYduOD_1DNgnFmWgFCF14CWZQ-5L5WsDof_reqFQRyTr6BLEtVBfa0EH7r_mJXGe3wuubjDX1wU-lHD55hSKfLCw0UJJFU9LKIdk5dwdbZ92m4ssGb6Btfo-_HvyxjNzIJgKdTnMgK/s1600/magnifier-hover.png) no-repeat;
        outline: none;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
        <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
        <input id="button-submit" type="submit" value="" />
    </form>

Search Box-6

Kode HTML:

<style>
    #searchbox {
    width: 280px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1CDKpKxu6UWqZO5zdSq5CdMuOoNda2vFk_I-Qw5s9vexvmaAKpKs8gHeX4qzuVUGK7SFjHu6lpKgt78I0X_Emfs1IEt8g-abrQE-61UwRkyBnXwE5Ux4ZGZd9dXGwSeTe-yPZNq9ZxvT9/s1600/search-box.png) no-repeat;
    }

    #searchbox input {
        outline: none;
    }

    input:focus::-webkit-input-placeholder {
        color: transparent;

Pasang Iklan Disini