Cara Memasang Search Box Sendiri

Salam Jumpa Kembali Sobat Blogger.com

Seacrh Box adalah salah satu sarana yang sangat penting dalam blog, namu kadangkala seacrh box bawaan blog sering mengalami error. Maka dari itu saya akan mempostingkan bagaimana cara membuat serach box sendiri tanpa perlu edit HTML karena ini berupa kode HTML/Java Script. langsung saja saya jelaskan :

• Pertama Log in ke blog anda
• Kemudian klik Tata Letak dan pilih tambah widget HMTL/Java Script
• Langkah berikutnya adalah pastekan kode dibawah ini ke dalam kotak HTML :

Search Box Pertama.

Kode HTML/Java Script :

<form action="http://www.deknanda.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Search Box Kedua.

Kode HTML/Java Script :

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXXSz7vqIerezRqE4npKMdSIeBHGBVeVEuTT5g00NB6S_pydvXio2hWCHPf7BLTzJoMp4UNenjJwkwBb-ownaTwqfnMmI9Yuma1MhQtyRuq9UWFJKVEHORynTcUth4m-EIJL5CAcAa8jpF/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Search Box Ketiga.

Kode HTML/Java Script :

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp769gz4zDXZ77EuSSZ8GWkRkKqJQ2FFx9oH22k4fUiMHme3BCxM3z8l1ILFnqX_07dSKkJfskBJRDBSaejloiJwiDsFnLRxKaZif5HbnnZmMIBly6ZCEAuyL5iug32sDz3IGGRKonLQ0/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

Search Box Keempat.

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA8xeUva8XLdx0ft55al9mW0lj4iSsbQux3SD8Z5Bx0pqalc7rRlUCCI6d5dmGitZVYmUa_OQ4HUnMDz8B9bFa40IikAQaK39_0ZxXygH-zVFyjIC6hBu5rhyphenhyphenYMwlVZA7lp1__ttv3nLX-/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    disaply: block;}  form#mediablogger-searchform {    display: block;    padding: 9px 16px;    margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;    padding: 7.5px;    margin: 0;    width: 198px;    font-size: 16px;    font-family: georgia;    font-style: italic;    color: #666666;    vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {    margin: 0;    padding: 0;    height: 40px;    width: 74px;    vertical-align: top;    border: none;    background: transparent;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-searchform" action="/search" method="get">        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'        onblur='if (this.value == "") {this.value = "Search...";}' /></form></div>

• Kode berwarna merah dapat diganti sesuka Anda
• Kode berwarna kuning dapat diganti sesuka Anda (widht atau height-nya)
• Kode berwarna putih dapat diganti dengan url berikut :

1. http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png

   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN0Nw1dGBHGQFxJURn2wv_qOzrr7xwvlsrbuAjitq1JHgpHsjJpc2afy4wb5E-d2f0j2DUjXZ4jv4mrgAchOvP7k27rSz_KZ_HUWQazvgrJDXYy13u8Wcl5iqkMNTE1qzEuoYiPs2lkqnz/s1600/lostsector-search-box-gray.png

   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEwVgCQHr7gSYWPUatximdN2IV5dzlzNATfxsfmTQqIk-FiBvVesyzwCSG3u0hS8uBBnzahP0hl6ml3cKEphlggWjWhf1rbkh_PqAobTYdVw7ILnKvS7dhu-Vd6V5AP_WCeAsd17jbErzH/s1600/lostsector-search-box-black.png

   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW44QyrDVQLfsVhibW7_M3T3bKf4mBpampaj7N9O4KACPQ57_73il2wKh1BYb0MuW-8ls9M_1fPNREF1jF03SrONP16V_a11QYTr_0OkT1kib0RlTL1Lljz02Qb1D9gTNpeyAny3irBQr-/s1600/lostsector-search-box-red.png

   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfgjoGLbnuKraNFXyjc0aYXDwlkDxuFfTz0XbB8zeFJtiXPNDP-55FzbC0-GNvJ1zR0YIjeHe1PP3d-bLP7aHR68Ifvl97wX9vHVLD7YsMlXVBRN2en_sk8LpL-rva_FbG-OkEgOnWAXI7/s1600/lostsector-search-box-yellow.png

Itulah beberapa pilihan widget tombol seacrh. Setelah selesai mem-pastekan kodenya, klik save dan pilih tempat di sidebar yang tepat.
Sekianlah cara Memasang Search Box sendiri, semoga bermanfaat bagi blogger.com.

Terima Kasih Atas Kunjungan Anda.