disini mazinu akan memberikan tips blogger kepada kalian tentang bagaimana cara membuat
kotak pencarian atau
search box
di blog kalian. Nahh,, disini mazinu 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 Blogge
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Nah disitu ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.
7. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.
Kotak Pencarian 2
Caranya :
1. Login ke akun Blogger
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Klik HTML/Javascript
6. Dan Pastekan Kode dibawah ini :
<form action="http://mazinubersahabat.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://mazinubersahabat.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.
7. Lalu 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/AVvXsEhWOG3jg3b4_0jfLK6LCGgqNaWmR5DlgX06qhyHME0Wt1MJ2Mhuf1u_T3fdsTlVTj9_DPmcv08ng5xnmvWkj3KItAZCaest4X1IcT8XLMq21uDCdCvyHYobUprqvG-lFUO5lNdbDxmlT_QL/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/AVvXsEiZL3lhPjasEIRotKo8eWp_IvoeUvxCdTh5BCayBdttlj7Vw78F1XyLdn6pLGL7L-lRugFSLAj_fKn3vWXT8u7v_zQm7VFrWAiBIjlR2pIClmkVuLTsX0qIfmZLO5XqW9_AgyeFXl7wjY4/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 memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :
<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgigrFwgl34QvmbbkzWH7n9v3QYBP6PEgT_Dp43aj_Gy2ypWoLhtq9WVG4VbnfjDRAqTXWJJhbMjSzugzCGJe8TN3P1dr0iIX4OPTdNNtV7grywzi_O-e6sK5wstFeBcbpRhDWvJzKeu13a/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/AVvXsEgigrFwgl34QvmbbkzWH7n9v3QYBP6PEgT_Dp43aj_Gy2ypWoLhtq9WVG4VbnfjDRAqTXWJJhbMjSzugzCGJe8TN3P1dr0iIX4OPTdNNtV7grywzi_O-e6sK5wstFeBcbpRhDWvJzKeu13a/s1600/impoint.blogspot.com-green.png
Gaya Pencarian warna
merah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHzU06oD9Cqav6zKKIk6EM_ayb_vc0Yf9VvLMM4iSBC4ZQx-BUUi9EOnlccQ7FUUAfcPP-VMNv80P4x_qbzX8c2JJ4GwUbaenDEVbnnSnPjAsjoxuxwIUse71ZgwJR11ZP90WE9DwvTtZD/s1600/impoint.blogspot.com-red.png
Gaya pencarian warna
biru :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGobXi5VqB4WzVEFxKkxs-MtnFvLdsSywj4fydrMY5OWeojq_dl9SWNL8UCfNSH-TPnzXipsQbRqh2Ms8LwCzn3SGAwTxqwiLlkCPqHfxb7d-fdldbOu4b_r73qqDwFdRoFvt4rR_rzj7w/s1600/impoint.blogspot.com-blue.png
Gaya Pencarian warna
orange :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksXdJX_I0eDkCvda1-Yr8W-fTUUhPY00QRqta35OSuxgKqI2H73Cc_anTiZ1S4qnsxWU1IypIEZ43cmgmzlqUwCPTKfyx82ZIHAmp5CWVVJYt8p_dGTKa7AU6NGT7wwp9AEuFkMMKWrjF/s1600/impoint.blogspot.com-orange.png
Dan salah satu contoh hasilnya nanti seperti ini :
Kotak Pencarian 6
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :
<style type="text/css">
#a-searchbox{
background:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAC4QZ-HyfUGxkruOOY7mqdxZkfmTFMReh1xuEVp_JALYfmOk2FAgPrSJ8qim-Ki4gP-YdgZSd1BwZYk83gliRMiJS5ivVeVqXYKsEaSAOFIcKMGOors8nDLTs-kyKT_XYOIUeRfgkdQqf/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block
;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width:
205px;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>
<center>
<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></center>
Yang hasilnya nanti seperti ini :
Keterangan :
Silahkan kalian ganti warna merah diatas dengan kode dibawah ini, untuk mengganti tipe dan style selera kalian,,
http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGMfG6FVEzJWG4epJOZCEswqwMBKrUmbJImGd-3s1Ca2YHU9ZLMdDY8oqRYmZKYW06WEL5B63CHa1sEVx1T6W75kPavGHICxzwWpz1K41bcNmrdO0Q21bUn7Z2EaiO-khN4z5DLkfSOL6z/s1600/lostsector-search-box-gray.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifb9ovGjQ4SAMBvET3V6YxFI8toSmR-1IRtyFMNWVrLnq07kG6xhguVGoGXg6Co8hyzsJXzHZpnVNjthd2bi4pqvYcz7xfxn1mbZNnw2ggpWjNfiW0RXC_Gxd_1Un1AbzjZ5j-mKqB-12b/s1600/lostsector-search-box-black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqDaqqw1k2xBwBuIePTGHk5j0R1sCUPPFQ3bhifZpRn2HFMwq9Jf5tfmjmISCG10V0ZL4ecMnAhbIn6pwoVLc7fj4aRjTAiWOYWVVpicyqndKgCUMMgXFnD8GrLdl122YO5uxO68RiynRi/s1600/lostsector-search-box-red.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-JMsgo7aeszg7oPJXIekCpOxxIbW1cuvyjZR_irwH-5QU0aCmKZ2OPOHCPPiuuoFFzNEj5xEHxUggajaucGUPDjajZdV2aWIFvs8Y9KoP6VL1ICxPV-91eAOzydjt__0YZf6fMtxFTDmT/s1600/lostsector-search-box-yellow.png
Okeh,, gue rasa cukup tentang artikel yang saya tulis mengenai
6 Cara Membuat Kotak Pencarian Paling Keren di Blog ini, semoga bermanfaat buat kalian!
sumber:http://mazinubersahabat.blogspot.com/2013/05/6-cara-membuat-kotak-pencarian-paling.html