Cara Menciptakan Kotak Pencarian (Search Box) Di Blog Keren Terbaru

Search Box / Kotak Pencarian adlah widget yang berfungsi untk memudahkan pengunjung dalam mencari article / postingan yang mereka inginkan dengan tips hnya mengetikkan bbrapa kata yang ingin dicari ke dalam kotak tersebut kemudian klik tombol search maka akan menemukan / menampilkan hasil pencarian dari blog tersebut tanpa harus mencarinya dengan susah payah. Membuat kotak search kafe di blog, wordpress, mywapblog, tumblr maupun WEBsite sangat penting bagi para blogger semoga pengunjung tidak kesulitan dalam menemukan article yang mereka cari pada situs tersebut, selain itu kita juga dapat memasang banyak sekali macam bentuk search box yang keren, bagus, cantik, bergerak dengan isyarat script css dan html pada blogspot.

Kali ini aku akan share gimana Trik Membuat Kotak Pencarian (Search Box) Di Blog Keren Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sahabat yang ingin pasang kotak search pada blog dengan memakai css dan html.

Ada 2 tips bikin search Box yang akan dibahas adalah yang pertama melalui widget bawaan dari blog dan yang kedua dengan memakai isyarat sendiri baik pada sidebar, footer atau header.

Trik Memasang Search Box Bawaan Blog :

1. Untuk menciptakan kotak search lewat bawaan blog dengan tips masuk sajian Lakamut / Tata Letak kemudian klik Tambahkan gadgett di daerah yang sahabat inginkan misal sidebar

2. Kemudian cari pilihan widget Kotak Penelusuran dan klik tombol tambah

3. Setelah itu eksklusif saja centang semua menyerupai gambar dibawah ini dan klik Simpan

4. Terakhir klik Simpan setelan yang ada di pojok kanan atas.. Selesai untk pasang search box bawaan blog

Trik Memasang Search Box Dengan Kode Sendiri :

1. Kalau sahabat tidak ingin dari bawaan blog, sahabat dapat membuatnya dengan tips kedua memakai isyarat sendiri adalah masuk sajian Tata Letak / Lakamut dan klik Tambahkan gadgett pada posisi yang diinginkan misal sidebar

5. Kemudian klik tambah pada pilihan HTML/Javascript

6. Setelah itu masukkan script isyarat berikut ke dalam kotak konten tersebut

<br/><form action="http://tipszain.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="28" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

#Ganti goresan pena warna merah dengan alamat url link blog sobat
#Ganti angka warna biru untk mengatur ukuran search box

Jika sudah, sahabat dapat klik tombol Simpan / Save

7. Terakhir klik Simpan setelan yang ada di pojok kanan atas.. Selesai untk pasang search box dengan isyarat sendiri

Berikut ini bbrapa script isyarat buat sahabat untk menciptakan search box dengan tampilan yang keren - keren memakai isyarat sendiri :

<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/AVvXsEjcp-iNrtL6S5uQYwz6czT8pFbOv_ir1Orim9Gcjfs6PWeAO8nQiqu_pI53apyD79fQvMoo4wYV11CcJpJF7Fwgu2q10S1fTItG4rA6ZHTq6pyhw89pizCuHXDaca_IDKKivprLGKx_Y6ZZ/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>

 <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/AVvXsEjcp-iNrtL6S5uQYwz6czT8pFbOv_ir1Orim9Gcjfs6PWeAO8nQiqu_pI53apyD79fQvMoo4wYV11CcJpJF7Fwgu2q10S1fTItG4rA6ZHTq6pyhw89pizCuHXDaca_IDKKivprLGKx_Y6ZZ/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/AVvXsEjBOUYFNMwN180rVcIVTQkeeLILUtGZKEIC1KSrZdGYbBZRAnAW8dZmboi_bcJMWiQzrd5-m_TkRxZ4EL3RtTU2-BUvJhLF28gw3IB12FGdiDzYahoPBkoW7DJOKtXAuobHfkHOIURsMjJV/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>

 <style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcqPwNUkY25iktU85mY5TykUXOWbaYW6smdcobjLhwpQVMO1BIMYNVbj1egycuL_6u9I64vgtJyCCIvHaD66PE2mDJzOuE_Df3I77_jIWphWawGwfhss5bGRVFM-t5JWtf1AaEXzRsAkzp/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/AVvXsEgmC4wvMbjvn9VU8YwIsw67CXhM4ZS5PtI39g54x6FB5dOB_DHOe46Y7RodKBDQ2pDcurTTWMLkp-txBuxdWqdrSgtey-mU5iCW2IcLGVZ5l2NjM1DeNB09Yvr7jufk5GeE5Fr0PMdsQ3R4/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/AVvXsEiwENmCMMtcMq5PyTi40HS1VA4-onkFfSuD1xQqv_s8wgfETO_-M_k3tSbB9FBOMRq-bFMKuJhjFfpYtiTPnHdygsKcxRgRu2-06PPVT1oKp6EJi9oU8b5QV9s70rTiIUTmutr0SqHlE6U9/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwENmCMMtcMq5PyTi40HS1VA4-onkFfSuD1xQqv_s8wgfETO_-M_k3tSbB9FBOMRq-bFMKuJhjFfpYtiTPnHdygsKcxRgRu2-06PPVT1oKp6EJi9oU8b5QV9s70rTiIUTmutr0SqHlE6U9/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>

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTRlIRyABhk4HcRkzj71DZR_rBUhpRmKG0bM-JzAYNnfE8joqsLbN1tMUlTW16-Y6gHPoFHJ7za2p2XktOzEP6Y48qrfhd_Wmfp_OQZLOzE3B6kZ23Qnpm8q7soofxx_OozIH0yJ70ZcH/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/AVvXsEgw3w8bGMXbiUUBzhBBvSLfOZvaboRobvUpnJ4ltrb1OWz77Bv8EOZ4dvWOLzIlnuKly1GAXjXyRc7tWE-FEb2oAr0Toz28a4Bl9EPykXiExZ5_CHCwSdT_cY9em2ptj7rSOt1wNJ0JEoi2/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/AVvXsEiYBgwhR_1emvTZX4f34JwpKpgT2cY9CVUoarVUAGGQBVN8GcXLbso1XRGxXJpC-SVrQHEeBkiW8Gff3u5BtjD_ZjcqzgVs6Q8TyHIIWWw-v_LKKIxlFbZHPK2C_a756JTuQ8VntnYEolgg/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>

<style>
    #searchbox {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE2Dj1diamsRMmL0qfAzRjsamZrLT_hTdMxy8BOu8FFlYbQRkxGjxd0ORsgdlplIYjVzwxiPqjJh-Eo6wyH-ZfdJPMCqrpmYsE30SwPxuF8zZPF4BMGkA_StND6WhBe3XgzGmqunmI4-LO/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/AVvXsEjbCIS_kFooouAppb_9I92lvbJP_FlWonF29ywJfKp62BZtnoFjaykav2PeUACFqOMXKfTJ1QZfYlFmCLb5fYm6yU5qkksE4rYlnD7jPXJAKFwtP_5f1Tgabs0FdmTWfeE302QXGdSm3qT8/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/AVvXsEgetS8lMXNO6_7Hbi-9mxq7q4DqVAYfGD0JFtvK7GvKyvKoKe5930FNkakn8EBURyP87jWFXxJHUW0cNRjDlnrGothhZ5yRFo4VINvL13W8DfT0IH_vgkZcUDF7hjTgUsmLGLaw5FZRh9HZ/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgetS8lMXNO6_7Hbi-9mxq7q4DqVAYfGD0JFtvK7GvKyvKoKe5930FNkakn8EBURyP87jWFXxJHUW0cNRjDlnrGothhZ5yRFo4VINvL13W8DfT0IH_vgkZcUDF7hjTgUsmLGLaw5FZRh9HZ/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>

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

    #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: transparent;
    border: 0px;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    font-size: 14px;
        color: #f2f2f2 !important;
        padding: 10px 35px 10px 20px;
        width: 220px;
    }
    #searchbox input[type="text"]:focus {
    color: #fff;
    }

    #button-submit{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimpU1zD4m-9u-tyaM313vJx_cgGZ1pzMevUe-6g_02RV_5AyiuMtM7rgNp6JmaDOiImEW6QKqrhyphenhyphenGLldM-Tlcx4Rj5T5WnERtUZtoU_0Gi7ChZlnxtEGGNQtgv7U5mSZohUoclImlyPL3w/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
    }

    #button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheLlP8JjvwoX_apaRvVBMsvO31Ux_iAZzul0OR6syqmOuSEzzEop8-UNQ1VIiOt2MsPqnR-CAaE6Ui9S1NrNOlz17IxcCMskxXev1etypjse8oZAFlExMSslJX82GOsQiLA0pu3Pn1XJ58/s1600/search-icon-hover.png);
    }
    </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>

#Kode - isyarat tersebut dapat eksklusif dimasukkan ke kotak konten tanpa ada yang perlu di ganti / edit dulu.

Nah itulah gimana tips menciptakan kotak pencarian / search box di blog keren dengan gampang dan cepat.

Silahkan dicoba