Cara Membuat dan Memasang Kotak Pencarian (Widget Search) Pada Blog Part 2 - Disamping Menu (Navigasi) v2.0. Hari ini aku akan melanjutkan tutorial yang kemarin karena aku rasa belum sempurnah sekarang aku berikan sedikit tutorial tentang tata cara membuat dan memasang widget search (widget kotak pencarian) pada blog tepat disamping kiri Nav (Menu Navigasi), walau ada banyak yang menyediakan fasilitas kotak pencarian (search box) ini, namun menurutku tidak sebagus karya sendiri. Perlu diketahui, sebenarnya blogger sendiri telah menyediakan fasilitas ini yaitu "Pencarian Powered By Google". Widget default ini kurang baik menurut aku karena tidak sesuai selera. Nah bila Anda yang ingin membuat widget kotak pencarian (search box) sendiri pada blog teapat di sampin Nav (Menu Navigasi), ikutilah tutorial berikut ini.
- Pertama Login Ke Blogger
- Klik (pilih) Rancangan
- Klik (pilih) Edit HTML
- Download Lengkap Template (disarankan karena bila nanti terjadi kesalahan Anda tinggal meng-uploadnya lagi.
- Cari kode berikut default "#nav" kalau tidak ditemukan coba cari yang ini "navigation atau container"
- Setelah ketemu, lihat lebar navigasinya misal default-nya
---Nav---
#nav{
width: 1000px;
height:100%;
background-color: #fffff;
display: inline
}
#nav ul {-----} misal bentuknya seperti ini
#nav li {-----} misal bentuknya seperti ini
#nav li a,#nav li a:link,#nav li a:visited {-----} misal bentuknya seperti ini
#nav li a:hover, #nav li a:active {-----} misal bentuknya seperti ini
#nav li li a, #nav li li a:link, #nav li li a:visited {-----} misal bentuknya seperti ini
---End Nav--- (hanya pembatas agar cepat mengetahui batas nav pertama)
- (bagi dua kode yang berwarna merah diatas, dimaksudkan agar ada tempat (ruang) untuk widget pencarian-nya nanti.
- Perhatikan perubahan dibawah
---Nav---
#nav{
width: 800px;
height: 40px;
background-color: #fffff;
display: inline
}
#nav ul {-----} misal bentuknya seperti ini
#nav li {-----} misal bentuknya seperti ini
#nav li a,#nav li a:link,#nav li a:visited {-----} misal bentuknya seperti ini
#nav li a:hover, #nav li a:active {-----} misal bentuknya seperti ini
#nav li li a, #nav li li a:link, #nav li li a:visited {-----} misal bentuknya seperti ini
---End Nav--- (hanya pembatas agar cepat mengetahui batas nav pertama)
---Nav2---
#nav2{
width: 200px;
height: 40px;
background-color: #fffff;
display: inline
}
- Cukup seperti diatas saja.
- Cari lagi <div id='nav'> kalau tidak ada ditemukan, coba cari yang ini <div id='navigation'> atau <div id='container'> dan copy paste code dibawah ini tepat dibawahnya.
<div id='nav2'>
<form id="searchthis" action="http://namablogkamu.blogspot.com/search" style="display:inline;" method="get"><input id="b-query" maxlength="255" name="q" value="Cari artikel..." type="text"/><input id="b-searchbtn" value="Cari" type="submit"/></form>
0 komentar:
Post a Comment