0 Cara Membuat Kotak Pencarian di blog(Search Box ) part 1

Kali ini saya akan share cara membuat kotak pencarian/search box untuk blog anda yang belum memiliki search box.dan untuk cara pembuatan search box silahkan anda ikuti langkah langkah di bawah ini;

  • Login ke Blogger.
  • Pilih Tata letak
  • Pilih Edit HTML.
  • Tempatkan kode di bawah ini sebelum kode ]]></b:skin> atau tag di dalam CSS

#search {
width: 280px;
font-size: 11px;
float: right;
margin: 0;
padding: 6px 0 0;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #84CAF6;
width: 220px;
color: #000;
margin: 0;
padding: 4px 0 3px 5px;
border: 1px solid #005BC3;
display: inline;
font: normal 12px Georgia, Times New Roman, Trebuchet MS;
}
#searchbutton {
background: #84CAF6 !important;
color: #000;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
border: 1px solid #005BC3;
font: bold 11px Georgia, Times New Roman, Trebuchet MS;
}

    • Simpan Template, kemudian ke element halaman
    • Add Widget - HTML/Javascript
    • Copy kode di bawah ini ke dalam content
    <div id="search">
    <form id="searchform" action="/search/" style="display:inline;" method="get">
    <input id="searchbox" maxlength="255" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" value="Search..." name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" type="text"/>
    <input id="searchbutton" value="GO" type="submit"/>
    </form></div>


    Untuk panjang dan lebar kotak pencarian yang telah anda buat,anda bisa menyesuaikan ukurannya dengan merubah script yang telah anda copy paste ke HTML tadi.dan untuk penemptannya anda bisa meletakannya pada HEADER,NAV MENU,SIDEBAR atau di tempat dimana yang anda suka dan sesuai dengan blog anda.

    "SEMOGA BERHASIL DAN BERMANFAAT UNTUK ANDA"
    WINXSOFT

    comments

    0 Responses to "Cara Membuat Kotak Pencarian di blog(Search Box ) part 1"

    Speak Your Mind

    Tell us what you're thinking...
    and oh, if you want a pic to show with your comment, go get a gravatar!

    Next Prev home

    eNews & Updates

    Sign up to receive breaking news
    as well as receive other site updates!