kotak pencarian atau box search adalah salah Satu untuk mencari isi Artikel di Dalam website atau blogger Dan dengan menampilkan kotak pencarian Maka Akan memberikan kemudahan Bagi pengunjung untuk memncari Artikel atau Postingan Yang di kehendakinya.
Dan pada kesempatan ini saya Akan membuat Artikel untuk Cara membuat atau menampilakn kotak penelusuran atau search box
untuk yang pertama saya akan memberikan Cara menampilkan kotak pecarian atau penelusuran untuk bawaan / default dari blogger
Caranya sebagai berikut :
- Buka blog anda Lalu KLIK desain dan pilih tata letak
- Lalu KLIK tambahkan gadged
- Dan pilih / KLIK gadged kotak penelusuran (lihat gambarnya di Bawah ini)
- lalu Simpan gadged kotak penelusuranya
- Selesai
di Atas adalah Cara standart untuk menampilkan kotak penelusuran dari fitur bawaan Dari Blogger
Dan di Bawah ini saya Akan berikan beberapa Cara untuk membuat kotak penelusuran / box search yang lainya
Amortisasi:
- Warna biru Dalam, Kode Bisa di rubah ITU sebagai UKURAN Lebar Dan Tinggi kotak pencarianya
- Warna merah Dalam, kode di atas bisa di ganti dengan keinginan anda
keterangan : tulisan Warna merah pada Kode di atas bisa di ganti dengan sesuai keinginan anda
keterangan : tulisan url warna merah pada kode nya ganti dengan url blog anda
ke 4 ( empat ) contoh kotak pencarian di atas silahkan di pilih yang anda suka dan cara membuatnya sebagai berikut
1. buka blog anda lalu klik desain
2. pilih tata letak dan klik tambahkan gadged
3. pilih gadged HTML/javascript
4. dan pastekan salah satu kode kotak pencarian di atas
5. simpan gadgednya
6. selesai
Sampai disini Tutorial Blogger tentang cara membuat kotak pencarian atau box search pada blogger semua total 5 macam kotak pencarian / box search silahkan pilih sesuai selera anda, Terimakasih
Dan pada kesempatan ini saya Akan membuat Artikel untuk Cara membuat atau menampilakn kotak penelusuran atau search box
untuk yang pertama saya akan memberikan Cara menampilkan kotak pecarian atau penelusuran untuk bawaan / default dari blogger
Caranya sebagai berikut :
- Buka blog anda Lalu KLIK desain dan pilih tata letak
- Lalu KLIK tambahkan gadged
- Dan pilih / KLIK gadged kotak penelusuran (lihat gambarnya di Bawah ini)
- lalu Simpan gadged kotak penelusuranya
- Selesai
di Atas adalah Cara standart untuk menampilkan kotak penelusuran dari fitur bawaan Dari Blogger
Dan di Bawah ini saya Akan berikan beberapa Cara untuk membuat kotak penelusuran / box search yang lainya
1.
Kode nya:
<Form action = "/ search" style = "display: inline;" metode = "mendapatkan">
<Masukan id = "s" name = "q" type = "search" placeholder = " CARI Artikel Disini "/>
</ Form>
<style>
# S {
margin: 0 auto;
-Webkit-penampilan: none;
-Moz-penampilan: 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;
garis besar: none;
-Webkit-box-shadow: 0 0 0 1px RGBA (0,0,0, 0,3), 0 2px 0 RGBA (255255255, .3), inset 0 1px 2px RGBA (0,0,0, 0,2);
-Moz-box-shadow: 0 0 0 1px RGBA (0,0,0, 0,3), 0 2px 0 RGBA (255255255, .3), inset 0 1px 2px RGBA (0,0,0, 0,2);
box-shadow: 0 0 0 1px RGBA (0,0,0, 0,3), 0 2px 0 RGBA (255255255, .3), inset 0 1px 2px RGBA (0,0,0, 0,2);
position: relative;
z-index: 2;
background: # fff url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcu0T8cGItBhv3M0BLIQy9HOnfaL6bybb_dUEngOIBYKMCT7tO1hmvZoBydJhpfPCQAQILvdhEUkD2pILQtGMepcp0ZazOr3VruUAKtlFgbrc0CrOU4iDBkxqmkyly6bShXmExjhqlJ2w/s1600/Search.png) kanan tengah no-repeat;
}
# S ::-webkit-input-placeholder, # s:-moz-placeholder {
color: # 607078;
}
</ Style>
<Masukan id = "s" name = "q" type = "search" placeholder = " CARI Artikel Disini "/>
</ Form>
<style>
# S {
margin: 0 auto;
-Webkit-penampilan: none;
-Moz-penampilan: 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;
garis besar: none;
-Webkit-box-shadow: 0 0 0 1px RGBA (0,0,0, 0,3), 0 2px 0 RGBA (255255255, .3), inset 0 1px 2px RGBA (0,0,0, 0,2);
-Moz-box-shadow: 0 0 0 1px RGBA (0,0,0, 0,3), 0 2px 0 RGBA (255255255, .3), inset 0 1px 2px RGBA (0,0,0, 0,2);
box-shadow: 0 0 0 1px RGBA (0,0,0, 0,3), 0 2px 0 RGBA (255255255, .3), inset 0 1px 2px RGBA (0,0,0, 0,2);
position: relative;
z-index: 2;
background: # fff url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcu0T8cGItBhv3M0BLIQy9HOnfaL6bybb_dUEngOIBYKMCT7tO1hmvZoBydJhpfPCQAQILvdhEUkD2pILQtGMepcp0ZazOr3VruUAKtlFgbrc0CrOU4iDBkxqmkyly6bShXmExjhqlJ2w/s1600/Search.png) kanan tengah no-repeat;
}
# S ::-webkit-input-placeholder, # s:-moz-placeholder {
color: # 607078;
}
</ Style>
Amortisasi:
- Warna biru Dalam, Kode Bisa di rubah ITU sebagai UKURAN Lebar Dan Tinggi kotak pencarianya
- Warna merah Dalam, kode di atas bisa di ganti dengan keinginan anda
2.
Kode nya
<style type="text/css">
# A-searchbox {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPNinv-cLb7S27notZAEDr53XUm91Pb06tuTLI48kkUgz-Ur5FTziO3T7FvBBm6Yf3T4UiM8HvxZ6pcbHJghddIuBvu__XM5eYP-b8Mb72Vt68nfjSs5MMJAfAgLvRw1DKkWGep8d1dl6/s1600/lostsector-search-box-blue.png) tidak mengulang-pusat pusat gulir transparan; width: 307px; height: 50px; disaply: block;}
Formulir # a-searchform {display: block; padding: 10px 12px; margin: 0;}
Formulir # a-searchform # a {padding: 6px; margin-left: 20px; width: 205px; font-size: 14px; vertical-align: top; border: none; background: transparent;}
Formulir # a-searchform # abutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top; border: none; background: transparent;}
</ Style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<Input type = "text" id = "" nama = "q" value = "Cari ..." onfocus = 'if (== this.value "Cari ...") {this.value = ""} 'onblur =' if (this.value == "") {this.value = "Cari ...";} '/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</ Form>
</ Div> </ center>
# A-searchbox {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGPNinv-cLb7S27notZAEDr53XUm91Pb06tuTLI48kkUgz-Ur5FTziO3T7FvBBm6Yf3T4UiM8HvxZ6pcbHJghddIuBvu__XM5eYP-b8Mb72Vt68nfjSs5MMJAfAgLvRw1DKkWGep8d1dl6/s1600/lostsector-search-box-blue.png) tidak mengulang-pusat pusat gulir transparan; width: 307px; height: 50px; disaply: block;}
Formulir # a-searchform {display: block; padding: 10px 12px; margin: 0;}
Formulir # a-searchform # a {padding: 6px; margin-left: 20px; width: 205px; font-size: 14px; vertical-align: top; border: none; background: transparent;}
Formulir # a-searchform # abutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top; border: none; background: transparent;}
</ Style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<Input type = "text" id = "" nama = "q" value = "Cari ..." onfocus = 'if (== this.value "Cari ...") {this.value = ""} 'onblur =' if (this.value == "") {this.value = "Cari ...";} '/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</ Form>
</ Div> </ center>
3
kodenya
<span style='float:right;'>
<style type="text/css"> no-repeat pusat pusat gulir transparan; width: 300px; height: 35px; disaply: block;} bentuk # a-searchform {display: block; padding: 10px 12px; margin: 0;} bentuk # a-searchform # a {padding : 0px; margin: 0; width: 235px; font-size: 14px; vertical-align: top; border: none; background: transparent;} bentuk # a-searchform # abutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top; border: none; background: transparent;} </ style> <div id="a-searchbox"> <bentuk id = "a-searchform" action = "/ search" metode = "mendapatkan"> <input type = "text" id = "" nama = "q" value = "Cari ..." onfocus = 'if (this.value == "Cari ...") {ini . value = ""} 'onblur =' if (this.value == "") {this.value = " Cari ... ";} '/> <input type =" image "src =" http:// img1.blogblog.com/img/blank.gif "id =" abutton "/> </ form> </ div>
</ Span>
<style type="text/css"> no-repeat pusat pusat gulir transparan; width: 300px; height: 35px; disaply: block;} bentuk # a-searchform {display: block; padding: 10px 12px; margin: 0;} bentuk # a-searchform # a {padding : 0px; margin: 0; width: 235px; font-size: 14px; vertical-align: top; border: none; background: transparent;} bentuk # a-searchform # abutton {margin: 0; padding: 0; height: 30px; width: 30px; vertical-align: top; border: none; background: transparent;} </ style> <div id="a-searchbox"> <bentuk id = "a-searchform" action = "/ search" metode = "mendapatkan"> <input type = "text" id = "" nama = "q" value = "Cari ..." onfocus = 'if (this.value == "Cari ...") {ini . value = ""} 'onblur =' if (this.value == "") {this.value = " Cari ... ";} '/> <input type =" image "src =" http:// img1.blogblog.com/img/blank.gif "id =" abutton "/> </ form> </ div>
</ Span>
keterangan : tulisan Warna merah pada Kode di atas bisa di ganti dengan sesuai keinginan anda
4
Kodenya
<form action="https://jasabikin-website.blogspot.com//search" method="get"> <input class="textinput" name="q" size="18" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
keterangan : tulisan url warna merah pada kode nya ganti dengan url blog anda
ke 4 ( empat ) contoh kotak pencarian di atas silahkan di pilih yang anda suka dan cara membuatnya sebagai berikut
1. buka blog anda lalu klik desain
2. pilih tata letak dan klik tambahkan gadged
3. pilih gadged HTML/javascript
4. dan pastekan salah satu kode kotak pencarian di atas
5. simpan gadgednya
6. selesai
Sampai disini Tutorial Blogger tentang cara membuat kotak pencarian atau box search pada blogger semua total 5 macam kotak pencarian / box search silahkan pilih sesuai selera anda, Terimakasih