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

Search Box / Kotak Pencarian yaitu widget yang berfungsi untuk memudahkan pengunjung dalam mencari artikel / postingan yang mereka inginkan dengan cara hanya mengetikkan beberapa 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 kafetaria di blog, wordpress, mywapblog, tumblr maupun website sangat penting bagi para blogger supaya pengunjung tidak kesulitan dalam menemukan artikel yang mereka cari pada situs tersebut, selain itu kita juga dapat memasang banyak sekali macam bentuk search box yang keren, bagus, cantik, bergerak dengan arahan script css dan html pada blogspot.

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

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

Cara Memasang Search Box Bawaan Blog :

1. Untuk menciptakan kotak search lewat bawaan blog dengan cara masuk sajian Layout / Tata Letak kemudian klik Tambahkan gadget di daerah yang teman inginkan misal sidebar

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

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

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

Cara Memasang Search Box Dengan Kode Sendiri :

1. Kalau teman tidak ingin dari bawaan blog, teman dapat membuatnya dengan cara kedua memakai arahan sendiri yaitu masuk sajian Tata Letak / Layout dan klik Tambahkan gadget pada posisi yang diinginkan misal sidebar

5. Kemudian klik tambah pada pilihan HTML/Javascript

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

<br/><form action="http://gamepelajar.xyz/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 untuk mengatur ukuran search box

Jika sudah, teman dapat klik tombol Simpan / Save

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

Berikut ini beberapa script arahan buat teman untuk menciptakan search box dengan tampilan yang keren - keren memakai arahan 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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/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(http://4.bp.blogspot.com/-slkXXLUcxqg/VEQI-sJKfZI/AAAAAAAAAlA/9UtEyStfDHw/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(http://3.bp.blogspot.com/-g-zH25_DoxI/VD1BuatkgII/AAAAAAAAAgc/00hxspfvv3s/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(http://4.bp.blogspot.com/-OcDQ6Z9ojlQ/VD1KnwJjFOI/AAAAAAAAAgs/cu_pKN6bpL8/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(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/s1600/magnifier-hover.png) no-repeat;
    }
    #button-submit:active {
        background: url(http://2.bp.blogspot.com/-4-xFDFGKJrA/VD1Kn04f9TI/AAAAAAAAAgw/2ta84QY1x9A/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(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/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(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        width: 30px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/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(http://2.bp.blogspot.com/-Un3z-hkw1XA/VD0V9GO8zrI/AAAAAAAAAf0/ww_5VsvWayY/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(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-top: 10px;
        width: 19px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/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(http://1.bp.blogspot.com/-dwLNyhnHlTg/VEQZwf9drLI/AAAAAAAAAlg/rbd0HN4EZrY/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(http://4.bp.blogspot.com/-4MYBYE0i0Xk/VEQYlljvriI/AAAAAAAAAlQ/_TRkRG5EX1c/s1600/search-icon.png) no-repeat;
    margin-left: -40px;
    border-width: 0px;
    width: 40px;
    height: 50px;
    }

    #button-submit:hover {
    background: url(http://4.bp.blogspot.com/-6S4K8eHPM-c/VEQdf7l84GI/AAAAAAAAAls/j7_kGSpkIfg/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 - arahan tersebut dapat eksklusif dimasukkan ke kotak konten tanpa ada yang perlu di ganti / edit dulu.

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

Silahkan dicoba

Berbagi :