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.
Sori 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 Boxes berikut dan paste atau letakkan di dalamnya.
A.Untuk Style ini:
Ini adalah kodenya:
#otowebsite-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4p40GDf0v1xLUzvj9bUryAzJFH_OLijUKYKphMt_M7h58LdXTe_cTDeIZwIAt834yZF_kkC0mqJlXN1FGZ5kJXZQCy6jJ71sPOXKsDJL_-nhn9ZzXMZe4pjOfBTsD0N7q5_Sr-yUFSoU/s1600/otowebsite.blogspot.com-white.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#otowebsite-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#otowebsite-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#otowebsite-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="otowebsite-searchbox">
<form id="otowebsite-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 :
#otowebsite-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmZkse5gXTDIkBE_8n-_YiDUbEutGlW6PM2aywB7zhXVSaFPxxxFJ-KddtTiOsCivpHBVxpOosd5oM58XF1u9En6Ri8wpRGqlsxu1e-tMfrb32tg2gtyMkttW9QBbh2wEVSDnmUwvV854/s1600/otowebsite.blogspot.com-blue.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#otowebsite-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#otowebsite-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#otowebsite-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="otowebsite-searchbox">
<form id="otowebsite-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">
#otowebsite-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6xsHANbnOWDW0b_IPoH0IyVJbWi1IjRZP90xmOjNk8PJSWeKvBsVV5xHh5HNSseTWNXgd1f_fzZ7sRGW-g0hANGnEP6sP_76Nhc8h6hkeF2Jzy3mj7jlgX8xb_0P8jl1ooiUspAhpzeU/s1600/otowebsite.blogspot.com-black.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#otowebsite-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#otowebsite-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#otowebsite-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="otowebsite-searchbox">
<form id="otowebsite-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">
#otowebsite-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNDzQNdC14eQnArN0gxyQsitozaNhHh_LC1UT95Af3SkCxTDJ6kzJJxiUxjRLNfhV-UJ6kV3AlVZwrFyMqtI1E2RDgy0LhW86wpok7FRcjc9Aeu0fOpPbZFX9oG_f66lKOJdxyu0Gmc7s/s1600/otowebsite.blogspot.com-orange.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#otowebsite-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#otowebsite-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#otowebsite-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="otowebsite-searchbox">
<form id="otowebsite-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 :
#otowebsite-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmHftx-LGwev9KUH9KzdOkQHxurH7XCW8qJOwGquijZ_EZrhyFkLSnGhMjyUzzv0s2n5_ACuFe6FffuiW3JwVyuy7uVKTq3obQXAZpFnF8TbSSXX8H9cLxrXDgWfzh_3KWiCGcHwxoK2w/s1600/otowebsite.blogspot.com-pink.png) no-repeat scroll center center transparent;
width: 307px;
height: 50px;
disaply: block;
}
form#otowebsite-searchform {
display: block;
padding: 10px 12px;
margin: 0;
}
form#otowebsite-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#otowebsite-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 44px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="otowebsite-searchbox">
<form id="otowebsite-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.
Sekarang sobat bisa lihat sendiri perubahannya pada blog sobat.
Saya rasa cukup untuk kali ini !
Bagaimana apakah Sobat berhasil menerapkannya di blog sobat? Silahkan tinggalkan tanggapan atau komentar Sobat tentang postingan atau articles di atas!
Posting Komentar Blogger Disqus
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>
Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.
Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.
Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Konversi Kode di Sini! Daftar Member Aktif