Hay sobat , kali ini saya akan berbagi pengetahuan tenyang tips blogger kepada kalian tentang bagaimana cara membuat kotak pencarian atau search box di blog kalian. Nahh,, disini saya mempunyai banyak pilihan model dan warna kotak pencarian, dari yang simple sampai yang keren dan berkualitas. Nah, silahkan kalian pilih salahsatu diantara banyak pilihan dibawah ini :
Kotak
Pencarian 1
Caranya :
1. Login Ke Akun Blogger Anda Disini
2. Piih Tata Letak
3. Piih Tambahkan Gadget
4. Lalu Pilih Kotak Penelusuran
5. Nah Disitu Akan Ada Beberapa Pilihan , Silahkan Anda
Pilih Sesuai Ke Inginan
6. Lalu Simpan Dan Lihat Hasilnya .
Kotak
Pencarian 2
Caranya :
1. Login Ke Akun Anda Disini
2. Pilih Tata Letak
3. Pilih Tambahkan Gadget
4. Lalu Pilih HTML/Javascript
5. Lalu Pastekan Kode Di Bawah Ini
<form action="http://adaadaajaniblog.blogspot.com.blogspot.com/search"
method="get"> <input
class="textinput" name="q" size="40"
type="text"/> <input value="search"
class="buttonsubmit" name="submit"
type="submit"/></form>
Keterangan :
Ganti http://adaadaajaniblog.blogspot.com/ dengan
nama blog Kalian.
Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.
Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.
6. Save Dan Lihat Hasilnya
Kotak
Pencarian 3
Caranya sama dengan memasang kotak pencarian 2, cuma
Kodenya menggunakan kode ini :
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FU0ffWWaDKf-nlfF8Mtk2mQv1YkqVn52DPt2M3pMZa_-8IxPJSM6Qw6L48mu2pja2MEyZsja1FTz3rQIhxgGJpgqMoPJpmwLCOlbMFWlVOLUn7bHIMX4ANiINmAdk1uN8__n_-ZV__-A/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" 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="abutton" /> </form></div>
</span>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4FU0ffWWaDKf-nlfF8Mtk2mQv1YkqVn52DPt2M3pMZa_-8IxPJSM6Qw6L48mu2pja2MEyZsja1FTz3rQIhxgGJpgqMoPJpmwLCOlbMFWlVOLUn7bHIMX4ANiINmAdk1uN8__n_-ZV__-A/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" 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="abutton" /> </form></div>
</span>
Keterangan : Ganti Tulisan warna merah sesuai keinginan kalian, itu berfungsi untuk
menampilkan tulisan ditengah-tengah kotak komentarnya!
Dan Hasilnya nanti seperti ini :
Kotak
Pencarian 4
Caranya sama dengan memasang kotak pencarian 2, cuma
Kodenya menggunakan kode ini :
<form action="/search"
style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: 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;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5oMuR5bq2Fpsf-PROhw3gBrMzKtQFaNGGdB1NisikdoVPUSK5jAVIEtdlsmm2LDeT689cLTGXRBa1og4Sbupg8wMfVuzVyecKdaRnEyS42AIZKHxoJYdUOV8E8njuQbR2-BwHZ7j_3qA/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
margin: 0 auto;
-webkit-appearance: none;
-moz-appearance: 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;
outline: none;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
z-index: 2;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5oMuR5bq2Fpsf-PROhw3gBrMzKtQFaNGGdB1NisikdoVPUSK5jAVIEtdlsmm2LDeT689cLTGXRBa1og4Sbupg8wMfVuzVyecKdaRnEyS42AIZKHxoJYdUOV8E8njuQbR2-BwHZ7j_3qA/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
NB : Ganti warna
merah sesuai dengan selera dan kebutuhan kalian yang nanti
tulisan itu akan muncul di tengah kotak pencariannya. Dan warna biru itu
ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan!
Yang hasilnya nanti seperti ini :
Kotak
Pencarian 5
Caranya Sama Dengan Cara Kotak Pencarian 2 , Hanya
Kodenya Mengunakan Kode Di Bawah Ini .
<style
type="text/css">#mediablogger-searchbox {
border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZa_y3hLlK-p7Et_9UGFE60C_TGTUycb1qyHvdmwlemIahTWgzkpXJsXAnxMa2qCJ9msNVCuAEh69WUdfnceVZ_7t0DQnySkzvfJLni1YA-zGXSIvnIl_2H4G0TucqFjFGI4rlEMFRB3iV/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center
transparent; width: 307px; height:
50px; disaply: block;} form#mediablogger-searchform
{ display: block; padding: 9px
16px; margin: 0;} form#mediablogger-searchform #s
{ padding-left: 24px !important; padding:
7.5px; margin: 0; width:
198px; font-size: 16px; font-family:
georgia; font-style: italic; color:
#666666; vertical-align: top; border:
none; background: transparent;}
form#mediablogger-searchform#sbutton { margin:
0; padding: 0; height:
40px; width: 74px; vertical-align:
top; border: none; background:
transparent;}</style><div id="mediablogger-searchbox">
<form id="mediablogger-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...";}'
/></form></div>
Keterangan :
Ganti Warna Merah dengan
berbagai macam pilihan style dibawah ini :
Gaya Pencarian warna Hijau :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZa_y3hLlK-p7Et_9UGFE60C_TGTUycb1qyHvdmwlemIahTWgzkpXJsXAnxMa2qCJ9msNVCuAEh69WUdfnceVZ_7t0DQnySkzvfJLni1YA-zGXSIvnIl_2H4G0TucqFjFGI4rlEMFRB3iV/s1600/impoint.blogspot.com-green.png
Gaya Pencarian Warna Merah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMd6INBTUjLZoXghEOYFLw0EDtGQQ396QevxYGNegQeBV99DFZn2tVhFMYuUJpqO4-bKhKtRVffqEN6Tjh_mdMS-0fWkfSn5rRANebpA_RZTabeZoGJSUYUyo_bT2-wRgiaRaehBkyDHaW/s1600/impoint.blogspot.com-red.png
Gaya Pencarian Warna Biru :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2X5iMSMHBOQP1uBhXHBUpFlrhdkPkDa7oHNENZVPTtYFiFQDPxfO3TwUlTxy_CHY8K90yZafiuce-3_wZS6MsTtYfeDHzz6RqnVzb9jaxiifAjhc42iIBVPr8lKvmkPvqd6RZ-9CnctS6/s1600/impoint.blogspot.com-blue.png
Gaya Pencarian Warna Orange :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQwbOGnPr9IGTdtg5rQxOn93nH4c7Ra_UcE35uCXIJ7UqbrDqj51kQhBRSO1oFVJXh4qxl7gb4Jir4RMG9MdfW0rtEo4jteXv9Gn0nq0TAXfb3Gygoipw-qQpiOTIEPZOwQ3g6T-rLSNe/s1600/impoint.blogspot.com-orange.png
Dan Salah Satu Contoh Hasilnya Seperti Ini :
Kotak
Pencarian 6
Caranya sama dengan memasang kotak pencarian 2, cuma
Kodenya menggunakan kode ini :
<style>
#abt-search-btn {
background: none repeat scroll 0 0 #1ca4ff;
border: 0 none;
border-radius: 0 0 0 0;
color: #FFFFFF;
font-weight: 700;
padding: 10px 20px;
}
#abt-search-btn:hover {background: grey;}
#abt-search-box {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
padding: 10px;
width: 180px;
}
</style>
<a><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder=" Type Here ..."/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>
</a>
#abt-search-btn {
background: none repeat scroll 0 0 #1ca4ff;
border: 0 none;
border-radius: 0 0 0 0;
color: #FFFFFF;
font-weight: 700;
padding: 10px 20px;
}
#abt-search-btn:hover {background: grey;}
#abt-search-box {
background: none repeat scroll 0 0 #EEEEEE;
border: 0 none;
padding: 10px;
width: 180px;
}
</style>
<a><form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="abt-search-box" name="q" size="40" type="text" placeholder=" Type Here ..."/>
<input id="abt-search-btn" value="Search" type="submit"/>
</form>
</a>
Dan Hasilnya Akan Seperti Ini :
Itu Lah Beberapa Cara Untuk Membuat Kotak Pencarian Di
Blog .
Selamat Mencoba .. :)
0 komentar:
Posting Komentar