Untuk mempermudah para pengunjung mencari kata kunci yang
ingin dibaca pada blog kita, alangkah baiknya kita sediakan kotak pencarian
untuk memudahkan para pengunjung mencari artikel yang terdapat didalam blog.
Sebenarnya tidak perlu saya jelaskan kembali untuk apa
fungsi dari kotak pencarian yang ada pada blog dan juga pada situs-situs
lainnya yang sering pembaca jumpai di media-media online.
Agar tidak bertele-tele langsung saja berikut adalah cara
membuat kotak pencarian pada blog.
Ada dua pilihan untuk jenis tampilan kotak pencarian yang
akan saya bahas pada artikel ini, kotak pencarian bawaan blogger yang saya gunakan di blog ini dan
kotak pencarian sedikit modifikasi dengan tampilan lebih elegan.
Untuk memasang kotak pencarian pada blog, ikuti langkahnya
dibawah.
Kotak Pencarian Bawaan Blogger
1. Silahkan terlebih login terlebih dahulu.
2. Setelah masuk dasbor blog, pilih tata letak -> buat widget baru -> pilih Penelusuran Blog
4. Cek di blog sudah terdapat kotak pencarian klasik.
Kotak Pencarian Elegan
1. Silahkan terlebih login terlebih dahulu.
2. Setelah masuk dasbor blog, pilih tata letak -> buat widget baru -> pilih HTML/JavaScript
3. Copy paste kode dibawah.
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #E91B23;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Cari Disini. . .' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
4. Untuk merubah warna, rubah kode warna yang saya beri tanda biru. (untuk mengetahui kode warna baca artikel cara mudah mengetahui kode warna).
5. Klik simpan, selesai.
6. Cek di blog sudah terdapat kotak pencarian elegan.
Begitulah cara membuat kotak pencarian di blog, kurang
lebihnya silahkan modifikasi sendiri kode untuk pencarian blog.
Terimakasih telah berkunjung ke blog sederhana ini.
Untuk membaca artikel blogger lainnya klik disini, dan untuk
artikel tutorial lainnya klik disini.
No comments:
Post a Comment