-->






5 pilihan kotak pencarian atau box search di blog

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 menampilakan kotak penelusuran atau search box dengan 5 pilihan kotak pencarian di blog

untuk yang pertama saya akan memberikan Cara menampilkan kotak pecarian atau penelusuran untuk bawaan / default dari blogger

Cara membuat dan menampilkan kotak pencarian blog 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)

gambar widged kotak Negara Sederhana

- 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.
Contoh kotak Negara Sederhana 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/AVvXsEiRjTzi2CDW2KioJu-j_OdoBNq-9AQpx4UNi6tMtpJkKu5jzjNLsl1Takh1qCna-8pw5sq9KFX9RPA-G_6OAnP9FRYTMBirmUGHqG8MpjxGpDguc9E6Wh2FZpUSjHD7JGx0xi3tMsQe1Og/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. 
Contoh kotak Negara pencarian 2

Kode nya 

<style type="text/css">
# A-searchbox {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKMmGBcR-LUZY_t0AzRVGEITvfj1rtWbYpFouaFt9B9VHDDzSlTEEGNXPwLTRi_GyvhYBcS79PwSrxg195j7tVSWGXDM4A6mm5Fu7URRF8lp5oJjZsJDuGrO7QQ3SL2uTrs3uSRya7ZrjJ/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
Contoh kotak Negara pencarian 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>

keterangan : tulisan Warna merah pada Kode di atas bisa di ganti dengan sesuai keinginan anda
4
contoh kota search 4

Kodenya 

<form action="http://jatisronopule.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

Komentar

Tampilkan

No comments:

Post a Comment

sejarah

+