Disini saya akan menjelaskan membuat kotak pencarian dengan tiga cara, yang pertama adalah search engine yang telah terintegrasi dengan blogger sendiri, yang ke dua kita membuat konstruksi search engine pada template blog kita, yang ke tiga adalah search engine googole kita pasang di blog kita.
Kita mulai dari yang paling mudah
*Search engine yang telah terintegrasi dengan blogger bisa langsung di ambil dari daftar menu gadget blogger :
- Loggin ke Blogger
- Pada Dashboard Pilih Design dan pilih Page Elements
- Kik Add a Gadget dan pilih menu item Search Box kemudian pilih Save (Simpan)
.
*Trik memasang search engine yang ke dua, yang ini juga tergolong mudah, caranya kamu lakukan langkah seperti cara pemasangan search engine yang pertama tapi pada menu Add a Gadget kamu pilih HTML/JavaScript . Kemudian kamu copy dan letakkan kode di bawah ini di dalam form pengisian HTML/JavaScript.
Kemudian pilih simpan, kode di atas akan menampilkan kotak pencarian seperti di bawah ini, hasil dari pencarian akan secara otomatis di tampilkan di tab baru.
*Selanjutnya pembuatan search engine yang ke tiga, kali ini akan sedikit lebih sulit, karena kita mengkonfigurasi secara keseluruhan search engine. Langkahnya berbeda dengan cara pembuatan search engine 1 dan 2 , kali ini kita mausk ke form Edit HTML.
- Pertama kamu cari kode ]]> di template kamu dan letakkan struktur CSS di bawah sebelum atau di atas kode ]]>.
/* The Search */
#search {
height:30px; /* tinggi kotak pencarian */
width:auto;
margin-top:5px;
padding:10px 5px 10px 15px;
width:310px; /* lebar kotak pencarian */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT8PACj2X6SRw4gt7kgTZ-GI83but7c7G1UJTcNuF2KqjsOVMll18ESsB8Ti39a5MDQjIy1pZFORqKhaeUExPbU-ijn2v5x6kkMMpnAN7QumayE_geZU7H2zkMsQi4GKaRvP5tT49NvMs/s1600/sform.jpg); /* latar belakang luar kotak pencarian */
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 7px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLaeFKfQ6oTowxvKZvilQTTyUd4FzyL0OD7IuAJBzBtEEIGiXcxYzKrL2YmAFDLicmwaiqEWjuFqmCo8ApcSyYd0P1qe0IX4pJFH-4KqxCMXVdWBdF5YjYzPQv_GKuw7q9Ps1CkmUMWN4/s1600/sform2.jpg) no-repeat; /* latar belakang dalam kotak pencarian */
border:none;
font: normal 100% "Tahoma", Arial, Helvetica, sans-serif;
color:#333;
}
#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMc8gdyuYTqr9XNKSL3tFbLVlXiBo0OKPbfxTwWTUHJD7Q4qP_yQfYFkUkBaAl9H-L7RpOESTKYzq-vmyV4e47YaJiR0MOXnsJFjkKCE0An3mi2yyeJADjByPLFDIOzuBuoFJ731dfaLs/s1600/sbutton.jpg); /* tombol search */
border:none;
font: bold 100% "century gothic", Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:30px;
}
- Kalau sudah simpan template kamu.
- Selanjutnya kamu keluar dari menu Edit HTML dan masuk ke menu Page Elements dan pilih HTML/JavaScript dan masukkan kode html berikut di dalamnya
- Kemudian pilih Save / Simpan.
Selamat mencoba, semoga berhasil.
Tidak ada komentar:
Posting Komentar