Cara Membuat Navigasi Header di Theme ProSense

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.

on July 17, 2010 Filed Under: Desain Blog 38 Comments

Postingan Terkait:

Suka dengan tulisan seperti ini?

  • Silakan berlangganan Blogodolar Tips & News sehingga Anda bisa mendapatkannya langsung ke email Anda.
  • Caranya mudah dan 100 % gratis yaitu dengan mengetikkan dan mengirimkan alamat email Anda di bawah ini. Jangan lupa aktivasi berlangganan dengan mengklik link yang dikirim ke email Anda. Klik di sini untuk melihat cara aktivasi tersebut.

Comments

  1. BlogMixOnline says:
    July 17, 2010 at 10:37 pm

    itu hanya u prosense ya kang kodenya? u yang lain bisa gak ya?
    Postingan terbaru BlogMixOnline………………Mau punya hosting dengan Disk space 1 GB dengan Unlimited Bandwith DomainCOM

    Reply
  2. Zaiful Anwar says:
    July 18, 2010 at 12:32 am

    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.

    Reply
  3. sepwawan says:
    July 18, 2010 at 6:32 am

    Makasih mas ilmunya, semoga tambah sukses karena telah berbagi ilmu.
    Mas kalo nambah widget di header gimana caranya kaya punya blog ini.
    Makasih sebelumnya.
    Postingan terbaru sepwawan………………cara merampingkan alexa rank

    Reply
  4. Kang Kabayan says:
    July 18, 2010 at 7:51 am

    Blog Kang Kabayan sich masih pake blogspot jadi masih pake OOM Elegant Style Blogger Template
    Postingan terbaru Kang Kabayan………………Spesifikasi dan Harga Nexian Journey NX-A890 Android

    Reply
  5. Poetra says:
    July 18, 2010 at 8:36 am

    Kemarin coba download prosense dari dosh dosh, namuun pas instalasi mengalami failed. Mungkin gak kompatibel dengan wp 3.0?
    Postingan terbaru Poetra………………Blogsvertise-Earn cash and generate extra income from your blog

    Reply
    • Kang Yudiono says:
      July 18, 2010 at 1:57 pm

      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.

      Reply
  6. dJumTKS Weblog says:
    July 18, 2010 at 10:35 am

    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.
    Postingan terbaru dJumTKS Weblog………………Ganti Theme WordPress Error

    Reply
  7. satrya says:
    July 18, 2010 at 2:46 pm

    Kang sedikit tambahan, setelah code <a href=””>Home

    Slanjutnya bisa diganti dengan , jadi tidak manula masukan page nya,. misalkan akang mau buat page baru langsung otomatis muncul disitu. :)
    Postingan terbaru satrya………………Aplikasi Adobe AIR

    Reply
    • satrya says:
      July 18, 2010 at 2:47 pm

      yah gk muncul kodenya :(
      Postingan terbaru satrya………………Aplikasi Adobe AIR

      Reply
    • Kang Yudiono says:
      July 18, 2010 at 9:57 pm

      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.

      Reply
      • satrya says:
        July 19, 2010 at 3:25 am

        Owh klo exlude page bisa di sisipkan di dalam script nya kang ,. aduh satrya susah nulis scriptnya di komentar :(
        Postingan terbaru satrya………………Aplikasi Adobe AIR

        Reply
        • Kang Yudiono says:
          July 19, 2010 at 5:43 pm

          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.

          Reply
  8. budiastawa says:
    July 18, 2010 at 5:21 pm

    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.
    Postingan terbaru budiastawa………………Topsy vs Tweetmeme Button- Pilih Mana

    Reply
  9. Belajar seo says:
    July 18, 2010 at 6:27 pm

    salam knal mas,
    kalau ada waktu di tunggu kunjungan balik ya

    Reply
  10. imadewira says:
    July 19, 2010 at 11:36 am

    di oprek manual ya untuk menampilkan menu diatas ya Kang?
    Postingan terbaru imadewira………………Cara Tag Teman di Status Facebook

    Reply
  11. bankmoel.com says:
    July 24, 2010 at 2:31 am

    sob.. saya mencoba tutorial ini tapi kok g’ berhasil ya sob…
    Postingan terbaru bankmoel.com………………Mengoptimalkan Plugin All In SEO Pack

    Reply
  12. abang haris says:
    July 24, 2010 at 3:31 pm

    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 :D :D
    Postingan terbaru abang haris………………Akun Di Freehostia Aktif Kembali

    Reply
  13. Andank says:
    August 18, 2010 at 9:57 pm

    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

    Reply
  14. lawang says:
    September 28, 2010 at 6:14 pm

    terima kasih informasinya bang!

    Reply
  15. adminor says:
    October 3, 2010 at 2:23 pm

    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

    Reply
  16. adminor says:
    October 3, 2010 at 2:26 pm

    Sorry, maksud saya heightnya bukan width.

    Reply
  17. Kumpulan Cerita Dewasa says:
    October 13, 2010 at 2:33 pm

    tanks tutorialnya kang.
    tapi untuk sementara saya akan mencoba dulu kehebatan theme prosense :D . maklumlah baru coba wp self hosted.

    Reply
  18. siwan.web.id says:
    March 14, 2011 at 11:02 pm

    tanks banget kang…..ini dia yang sdang aku cari…yang mau theme prosense bluesense silahkan mampir ke web saya
    Postingan terbaru siwan.web.id………………Cara mengubah Bahasa website Jcow

    Reply
  19. zul says:
    April 9, 2011 at 12:26 am

    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
    Postingan terbaru zul………………4 tips SEO Terbaik for Blogger

    Reply
  20. Kutang says:
    May 5, 2011 at 8:34 pm

    Waduh bingung editnya kang..saya maunya di navbar itu kotak saja tidak ada menu itu gimana caranya kang :D
    Postingan Kutang Terbaru Buat Akun GA Lewat Docstoc

    Reply
  21. dian says:
    November 11, 2011 at 3:58 pm

    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
    Postingan terbaru dian………………Fellowship for Women from Developing Countries

    Reply
  22. catatanlinuxku says:
    December 10, 2011 at 3:10 pm

    berhasil mas di web temen saya, keren :D

    Reply

Trackbacks

  1. Mencoba Modifikasi Navigasi Header | harisahmad.com says:
    September 17, 2010 at 12:59 am

    [...] footer blog Ogut pun sedikit mencoba untuk modifikasi navigasi header theme best now dengan panduan Cara membuat navigasi header dari blog Kang [...]

    Reply

Speak Your Mind

*

CommentLuv badge