Febryan Sidauruk Blog: Cara membuat Kotak Pencarian Di Blog/Web

Bagi sobat yang baru bergabung dalam dunia blogging, kalian harus tahu bahwa kotak pencarian dalam blog itu sangat penting. Hal ini untuk mempermudah pengunjung mencari artikel postingan yang ada di dalam blog kita. Seperti mesin pencari Google misal, mesin ini mempermudah kita dalam mencari data yang kita butuhkan. Begitu pula di blog sobat, hal ini akan sangat membantu para pengunjung blog sobat.
Di beberapa template, widget pencarian ini sudah dicantumkan, namun bagi yang belum ada jangan khawatir karena kita bakal belajar cara buatnya.

1. Menggunakan JavaScript
dengan menggunakan kode javascript. Caranya cukup mudah kok!
Pertama login akun blogmu, terus pilih Tata Letak, terus klik Tambahkan Gadget, PilihHTML/JavaScript.
Lalu masukkan kode berikut:

<form action="http://nama-blogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Ganti tulisan "nama-blogmu" dengan link sobat, dan "30" dengan panjang lebar yang sobat kehendaki.
Kalau sudah klik Simpan.
Hasilnya akan menjadi seperti ini:

2. Menggunakan Widget Penelusuran
Cara ini hampir sama dengan cara pertama, bedanya kita tidak menambah kode script apapun. Kita hanya menambahkan widget ke blog kita.
Pada Tata Letak, kita tambahkan widget Kotak Penelusuran.
Nah terus klik simpan dan atur sesuai kehendak sobat.

Selesai, semoga tutorial ini dapat mempermudah pengunjung blog sobat dalam mencari artikel postingan yang sobat buat.

Another Way

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 :

Keterangan :
Ganti http://nama blogmu.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/AVvXsEgOsSGg5AMxShiaWpeadizxgZZWYuCwWRgqzNE1p3jOZ_S5RthH8I0hZq6fzkUTsvdOzLgo3eNjMlSrJFdNoLWHDpNmBKx-hAQratzl86fPYzktNqXSWlUqHH_8ksbvpGbQ4t0oEIQud5LY/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/AVvXsEhtA3u3CATa7IlqLSDi0QpQ99KGUb7OwkhZONjeT_BZybp5Rf9mF7XvVtEHotsvDxWOQwrblt90cyexy_ITFQg_ukVtadW-hm63DH1xMAJxc9p_om2yr6BBt9MFLDutY5mTSUmLpcsmyBA/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 :

Keterangan :
Ganti Warna Merah dengan berbagai macam pilihan style dibawah ini :

Gaya Pencarian warna hijau :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCvSsZl9V_gShbJMLNtIBq6phjXWSw9VettfbKxRHvK4OEpKgcZ93vaS5psq1ndFdbTxj8YWrBCawBpxWoGztXVEQm6E5sN00Gv10uRbP6PT61jpWQkE4MHEJYB4eVnNGSqsv7ir-KKc_F/s1600/impoint.blogspot.com-green.png

Gaya Pencarian warna merah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjasV-46VWyjCoSyJRAaumws0c0l6lbK27mlkLVO9FHz4_hmsMbjdFb6yFtKH1lURZCoGi0RU6qZK9MzC6fnXBFY4rUSeBu4nSLIOOUtRwl-H7T7jdavjxioXNPL89I3gy11U-cPKGs-RLf/s1600/impoint.blogspot.com-red.png

Gaya pencarian warna biru :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTQo3oZ4jKEp82UR7AzwTPRHCm8AHiXml83SH7tjDJvvV45zcQJl3-JoHvprjDZMNYzkDX2bpLm29dwJsJdVYzOsrXHbh03AxccctMmQf5yJENyEDg4oKR-EBfjKpFsZXMoJ1-Nb0IcjTB/s1600/impoint.blogspot.com-blue.png

Gaya Pencarian warna orange :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgad6ZvFAXAkXIr3lBIKDPcULUv20aATk-PI8KNTX-FVRntWFfdjPY1lE9qmF0fcw61ArKmNO9IJjw1Wwj1pgqp4OjZhEINvmNQGJ4QWMWq2BJDNi6rGYyG35c50U8VxZXi6bWZ9LORzVYU/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 :

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/AVvXsEh3TbbOVoHIdsuEjDFmmc_x655_Iv7YmCvqZNJwo56CmsF1TgYv5HhlKyAO8V3-wETmtnz2UXg8swvkJDmQh_AAPcJdMHdkUjJwa06mGk07Il6MpOvWnJGUNmx8Sb_YiCCxxCCthVK86eKu/s1600/lostsector-search-box-gray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQTZy90lkhKhb1UCtKxuo6FJAUFVYWpOGtCOQE5Q7Pxfo8evjgAx-kgMh0GfRbFdVS-fLgBD5lGkivp_rjwN3JaKLtfcVBgMXukCk0U2RT_rEBKY0N74CnR9sZYXq1HQsfaZsOOhtIfFnv/s1600/lostsector-search-box-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYa_0k2xLJgSlv0hwI3uBK7KNZE6qQ0w6gdTMsGpe-6OeIatSZoYTkz7HX3qyaBBtJXFUqDxXU5hs1I-d5gF_JvffxRQYODi7jNps-pb3vZrhykOmrNY9vbNz7CTquqsnlZZ2iYvmcGeVM/s1600/lostsector-search-box-red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAedGofKRSekonSvNBhyphenhyphenIeaf2EXtiNMwkFBCd9fPjWy1scGWHAns02CX_f57RGApZcCDUuELzZE5e7fME5HJbPM6yoyjKKAD0LnzO-spxVv1Du5uqO_OZsLuESfCMzhBPUw9x3Toeahx9b/s1600/lostsector-search-box-yellow.png

Febryan Sidauruk Blog

Cari Disini

Kamis, 04 September 2014

Cara membuat Kotak Pencarian Di Blog/Web

Tertarik ??

Kotak Kritik & Saran