Copas tanpa izin dan meyertakan link sumber adalah pekerjaan PENCURI.
Pantunnya saya buat khusus untuk saya dan para plagiat atau pencuri konten alias MALING.
Tak menghormati minta di hormati, maling-maling.

Sory ya saya lagi emosi, ckckck, Di dalam postingan atau articles kali ini saya akan share kepada teman-teman semua tentang widget searc box dan kali ini temanya adalah Beautiful And Sleek Search Boxes.
Sok-sok pakai bahasa inggris dikit, hehehe . . .
Sebelumnya blog ini juga pernah membahas articles atau postingan tentang search box di antaranya Menambah Widget Search Box Sederhana Untuk Blogger dan Memasang Widget Pencarian Cantik Di Blogger.

Kalo sobat tidak memiliki search box di blog sobat maka saya rekomondasikan agar sobat menggunakan lima pilahan widget search box ini atau widget search box yang pernah saya bahas sebelumnya.

Okelah kalo begitu kita lansung saja membahas cara memasangnya di blog sobat, lest go . . . !!!

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Tambah Gadget.

3. Lalu pilih elemen HTML/Java Script.

4. Selanjutnya dalam elemen HTML/Java Script sobat copy salah satu kode Beautiful And Sleek Search Boxesberikut dan paste atau letakkan di dalamnya.


A.Untuk Style ini:


Ini adalah kodenya:

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCopdYUpohyA4m6jgaDFBYVxWlk4WlS_MCncRylf68KhQKLkKsyp2RBPSMHodlUXyi5lTBkSjMKHIhNYcyP6hn58qYtVUtBRFBU1fMtYtzOisb0SLOj1aSiI1FKdu227rr1cTyzn_lhc/s1600/otowebsite.blogspot.com-white.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}


form#helperblogger-searchform {

    display: block;
    padding: 10px 12px;
    margin: 0;
}


form#helperblogger-searchform #s {

    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}


form#helperblogger-searchform

#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
B.Untuk Style ini.
Ini adalah kodenya :

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdVlt2DDNKsnBWbxaNispdbooxg4n7Iw2ex-irX8vGkr7xOSxumDh6t7ZkybYy3d-8ncWPy3TwqniW4rsrsVIMD-o365Qqn1UdsqP3Q8NHqPMoDUDJ65ilPpAXHBcEMiZTaGRXgXQ_u_o/s1600/otowebsite.blogspot.com-blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}


form#helperblogger-searchform {

    display: block;
    padding: 10px 12px;
    margin: 0;
}


form#helperblogger-searchform #s {

    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}


form#helperblogger-searchform

#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
C.Untuk Style ini.
Ini adalah kodenya :



<style type="text/css">

#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIplytnunXLzYNv9IU4WDsgX4z50Sl4S7juhDTZ_Zw63jsDDOWYGbRNBj-5w4rvUZJ2GDIzREinbKXwCulj-3aUE25EU3s6exzg06HTyTOj_iIUaOB5wlBHqkAd3LbdURZym4nX5H-nA/s1600/otowebsite.blogspot.com-black.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}


form#helperblogger-searchform {

    display: block;
    padding: 10px 12px;
    margin: 0;
}


form#helperblogger-searchform #s {

    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}


form#helperblogger-searchform

#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
D.Untuk Style ini.
Ini adalah kodenya :



<style type="text/css">

#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ-5vC_P9g59miZNEc08JdF58bXjO3GBqPSksjtXy2p6Eyo2bHRRdLZ6CV2bjgC1CTa32YuyCXSu7hQokRm2vd-7qeBOHjalYg9vWkG9dnXiGB65OuhfjRxs3Un5zAkhmPxV4UyFl0Thg/s1600/otowebsite.blogspot.com-orange.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}


form#helperblogger-searchform {

    display: block;
    padding: 10px 12px;
    margin: 0;
}


form#helperblogger-searchform #s {

    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}


form#helperblogger-searchform

#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
E.Untuk Style ini.
Ini adalah kodenya :

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGas9u4WuGCuYycr0Tylxmx5ru1IcwjWChrKI_j0LA-8wRgUiyavk6Qaj7Z7PXwRnQjrVSQZpYk9fn8kfXw0GDgszHxZAuJcLPOf0ogUpY3GdeBwlo1qOg3Ftcms93t9MrFKLUvnC9i7E/s1600/otowebsite.blogspot.com-pink.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}


form#helperblogger-searchform {

    display: block;
    padding: 10px 12px;
    margin: 0;
}


form#helperblogger-searchform #s {

    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 220px;
    font-size: 14px;
    font-family: verdana;
    vertical-align: top;
    border: none;
    background: transparent;
}


form#helperblogger-searchform

#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 44px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

5. Simpan.