Kalau membuat menu navigasi header seperti Blogodolar ini bagaimana caranya? Kebetulan saya juga menggunakan theme ProSense Grey. Begitulah pertanyaan yang saya terima dari beberapa sahabat yang menghubungi saya via email. Karena perlu penjelasan detail, maka dalam postingan ini saya menjawab pertanyaan tersebut.
Sebelumnya, saya informasikan terlebih dahulu bagaimana saya sampai bisa membuat menu navigasi header di blog ini. Padahal, bila Anda sering berkunjung ke sini, tentunya Anda melihat selama setahun terakhir header Blogodolar dibuat “apa adanya”. Hal ini karena saya belum tahu cara membuat navigasi header yang relatif baik.
Solusinya datang dari theme buatan Zaiful Anwar yaitu 579 dolar. Saya “mencomot” kode CSS navigasi theme tersebut dan “mencangkokkannya” di theme ProSense Grey.
Saya mengontak Zaiful Anwar untuk meminta ijin mempublikasikan kode CSS yang saya comot itu. Dia pun mengijinkannya sehingga saya tidak menyalahi hak cipta.
Tahapan membuat navigasi header
Navigasi header yang saya maksudkan terdiri dari menu halaman (Home, About, Kontak, dan sebagainya) dan kotak pencarian. Tahapan membuatnya seperti berikut:
1. Login ke dasbor blog Anda yang menggunakan ProSense (bisa ProSense Grey, ProSense Blue, atau ProSense).
2. Klik Editor pada fitur Appearance.
3. Tekan Ctrl+F pada papan ketik komputer Anda, lalu ketikkan navigation.
4. Akan ada kode seperti di bawah ini:
.navigation {
display:block;
margin-bottom: 20px;
}
#nav {
list-style-type : none;
text-align : center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 3.15em;
height : 40px;
}
#nav a {
margin: 0px;
width : 94px;
height : 20px;
font-weight : bold;
font-style : normal;
display : block;
padding: 0 0 10px 0;
}
#nav a:hover {
background: #000;
}
#nav li {
float: right;
list-style-type: none;
margin: 0px;
border-right: solid 1px #fff;
}
5. Blok kode di atas lalu hapus. Copy dan paste kode berikut.
.navigation {
display:block;
margin-bottom: 20px;
}
#nav {
background: #006699;
clear: both;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
color: #fff;
font-family: Arial, Tahoma, Verdana;
height: 35px;
margin: 0;
padding: 0;
font-size: 12px;
text-transform: none;
width: 980px;
}
#nav .wrap {Â }
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%; }
#nav li {
float: left;
list-style: none;
margin: 0;
padding: 0; }
#nav li a {
border-right: 0;
display: block;
margin: 0;
padding: 10px 15px 10px 20px;
position: relative;
text-decoration: none; }
#nav a, #nav a:visited {
background: #006699;
color: #fff;
display: block;
font-weight: bold;
margin: 0;
padding: 10px 15px 10px 20px;
text-transform: none; }
#nav a:hover {
background: #F18000;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
border-top: 1px solid #cccccc;
color: #fff;
height: 24px;
margin: 0;
padding: 5px 15px 5px 20px;
text-decoration: underline;
}
#nav1 {
width: 280px;
float: right;
height: 35px;
margin: -35px 10px 0px 0px;
padding: 0px 20px 0px 0px;
text-transform: uppercase;
}
#nav1 li {
list-style: none; }
.cari {
height: 35px;
font-family: Arial, Tahoma, Verdana;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px; }
#subboxcari {
background: #fff;
width: 280px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 5px 0px 0px 0px;
padding: 3px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
display: inline;
}
7. Anda bisa mengganti width, color, dan background kode di atas sehingga sesuai dengan lebar dan warna blog Anda.
8. Klik Update File.
9. Klik header.php yang ada di sebelah kanan Anda.
10. Pada bagian akhir header.php ada kode seperti ini:
</div>
<hr />
11. Arahkan kursor sebelum kode <hr/> lalu tekan enter satu kali. Copy dan paste kode berikut di atas kode <hr/> tersebut.
<div id=”navbar”>
<ul id=”nav”>
<li><a href=”<?php echo get_settings(‘home’); ?>”>Home</a></li>
<li><a href=”http://www.blogodolar.com/about-blogodolar/”>About</a></li>
<li><a href=”http://www.blogodolar.com/contact-me/”>Kontak</a></li>
<li><a href=”http://www.blogodolar.com/sahabat/”>Sahabat</a></li>
<li><a href=”http://www.blogodolar.com/arsip/”>Arsip</a></li>
<li><a href=”http://www.blogodolar.com/tips-pemula/”>Panduan Pemula</a></li>
</ul>
<ul id=”nav1″>
<li><form id=”cari” method=”get” action=”<?php echo $_SERVER['PHP_SELF']; ?>”>
<input type=”text” value=”Pencarian…” name=”s” id=”subboxcari” onfocus=”if (this.value == ‘Pencarian…’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Pencarian…’;}” />
</form></li>
</ul>
</div>
12. Ganti alamat-alamat href di atas dengan URL halaman, postingan, dan atau kategori yang hendak Anda tampilkan di menu navigasi header.
13. Klik Update File.
14. Refresh atau tekan Ctrl+F5 tampilan blog Anda.
15. Bila berhasil, navigasi header-nya akan seperti blog ini.
Itulah cara yang saya lakukan untuk menambahkan navigasi header di theme ProSense. Sebagai catatan, kode CSS navigasi di atas bisa diganti juga dengan kode CSS navigasi header theme lain yang Anda kehendaki.
Semoga bermanfaat bagi Anda yang membutuhkannya.
itu hanya u prosense ya kang kodenya? u yang lain bisa gak ya?
Saya pikir bisa Mas sepanjang lebarnya disesuaikan.
ok kang
thx ya
Sedikit koreksi kang untuk poin 5 border di bagian:
#nav {
background: #006699;
clear: both;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
Menjadi:
#nav {
background: #006699;
clear: both;
border: 1px solid #cccccc;
dan dibagian no 11 jika ingin menampilkan Page secara keseluruhan script-nya seperti ini:
<a href="”>Home
menurut saya itu aja penambahannya kang.
wah script no 11 gak bisa ditulis di kolom komentar ne kang.
Thanks atas koreksinya Mas Zaiful.
Saya sebelumnya tidak tahu lho.
Perihal tampilan Halaman (Page), saya memang memodifikasinya karena saya lebih senang hanya beberapa Page yang ditampilkan pada navigasi tersebut.
Makasih mas ilmunya, semoga tambah sukses karena telah berbagi ilmu.
Mas kalo nambah widget di header gimana caranya kaya punya blog ini.
Makasih sebelumnya.
Itu bukan widget Mas, namun berupa gambar.
Saya membuatnya secara manual yaitu upload gamb-gambar tersebut lalu tambahkan URL-nya melalui fungsi scr img.
Blog Kang Kabayan sich masih pake blogspot jadi masih pake OOM Elegant Style Blogger Template
No problemo Kang Toni.
Kemarin coba download prosense dari dosh dosh, namuun pas instalasi mengalami failed. Mungkin gak kompatibel dengan wp 3.0?
Coba download theme-nya yang dari The Wrong Advices Mas.
Saya juga dulu failed saat upload theme yang saya download dari Dosh Dosh.
Link downloadnya sudah saya infokan pada postingan ini.
sudah saya save tipsnya kang mana tahu bisa jadi referensi utk theme saya yg baru.
mau nanya kang yudiono, saya kemaren sudah 4 kali mencoba untuk ganti theme wordpress dari berbagai webdesign tapi hasilnya selalu error blank/ tidak bisa diakses/ kosong terjadi setelah selesai install theme wordpress yang baru ketika klik ‘activate’/diaktifkan theme baru tsb langsung error blank/kosong
…terpaksa saya delete lagi folder theme wordpress yg baru tsb dari FTP kemudian blog ini kembali lagi ke default theme wordpress..dan sekarang di kembalikan ke theme skrg lagi yaitu MyApril Reloaded 1.7 karya mas jauhari.
Tahu penyebab dan cara mengatasinya kang supaya bisa ganti theme dan tidak error blank/kosong ?
Terimakasih.
Saya menduga ada problem dengan hosting-nya Pak.
Sudah coba upload theme via dasbor? Kalau belum, coba dulu Pak.
Saya selalu upload theme via dahbor lho.
barusan saya coba lagi dari dashboard kang, install themenya sukses saat hendak di aktifkan langsung error dan tidak bisa diakses blognya, blog yang lain dgn hosting sama bisa di ganti themenya…sepertinya cuma ada 2 pilihan pakai theme skrg atau kembali ke theme WordPress Default 1.6
buat sobat yang mengalami masalah pada saat ganti theme wordpress…
mungkin pengaturan cmodnya.. coba cmodnya di aktifkan menjadi 7 7 7
mudah2an membantu..
Kang sedikit tambahan, setelah code
<a href=â€Ââ€Â>HomeSlanjutnya bisa diganti dengan
, jadi tidak manula masukan page nya,. misalkan akang mau buat page baru langsung otomatis muncul disitu.yah gk muncul kodenya
Satrya, halaman bisa ditampilkan secara otomatis.
Namun, seperti jawaban saya atas komentar Zaiful Anwar, saya lebih suka hanya beberapa halaman saja yang ditampilkan.
Pada theme tertentu, ada fasilitas exclude page-nya, namun di ProSense tidak ada fasilitas tersebut sehingga harus dibuat secara manual.
Owh klo exlude page bisa di sisipkan di dalam script nya kang ,. aduh satrya susah nulis scriptnya di komentar
Saya tidak tahu bagaimana memodifikasi bagian komentar sehingga bisa memasukkan kode HTML dan CSS.
Punya tutorialnya kah?
Kalau belum ada, bagaimana kalau Satrya membuatnya.
Pasti bermanfaat buat saya dan yang lain tuh.
Awalnya saya pikir itu Navigasi munculnya otomatis. Eh, taunya dibikin manual ya Kang. Saya kebetulan pake theme Atahualpa, dimana kita bisa meng-exclude page tertentu agar tidak tampil di Navbar.
salam knal mas,
kalau ada waktu di tunggu kunjungan balik ya
di oprek manual ya untuk menampilkan menu diatas ya Kang?
sob.. saya mencoba tutorial ini tapi kok g’ berhasil ya sob…
kang saya dah coba2 modif navigasi header, walo gak bisa seperti si akang, tapi sudah berubah dari standar theme taiutu nav header katagori ke nav header halaman
Saya tunggu kang tema dan post yang akang janjikan kemaren…Maaf kalo terlalu maksa(saya pengen cepet ganti tema yang ringan dan seo)salam sukses kang yudiono
terima kasih informasinya bang!
Saya juga pake Prosense. Rencana mau ganti gambar header cuma bingung soal width headernya. Akang tau nggak width headernya brp? Atau bisa kasih tau di mana saya bisa dapat informasi width header Prosense? Saya sih udah cari di CSS tp kok gak ada ya?
Thanks before
Height ProSense menggunakan satuan %. Coba saja dicapture secara manual Mas, lalu paste di paint.
Btw, sepertinya sih ukurannya 130 px.
Sorry, maksud saya heightnya bukan width.
tanks tutorialnya kang.
. maklumlah baru coba wp self hosted.
tapi untuk sementara saya akan mencoba dulu kehebatan theme prosense
tanks banget kang…..ini dia yang sdang aku cari…yang mau theme prosense bluesense silahkan mampir ke web saya
Saya tunggu kang tema dan post yang akang janjikan kemaren…Maaf kalo terlalu maksa(saya pengen cepet ganti tema yang ringan dan seo)salam sukses kang yudiono
Waduh bingung editnya kang..saya maunya di navbar itu kotak saja tidak ada menu itu gimana caranya kang
Postingan Kutang Terbaru Buat Akun GA Lewat Docstoc
salam kenal mas.. saya mau tanya..??
baru aja upload bluesense.. tapi kenapa adsense di sidebar sebelah kiri kok ngk bisa di ganti ya..?? padahal di html sidebarnya sudah di rumbah. tapi tetep aja PUB adsen nya ngk berubah..??
kalo adsense yg lain bisa diganti..??
tlg jawabannya
berhasil mas di web temen saya, keren