Home » » Cara Membuat Navigasi Menu di Atas Header Blog

Cara Membuat Navigasi Menu di Atas Header Blog

Cara Membuat Navigasi Menu di Atas Header Blog Responsive Keren

TUJUAN navigasi menu di atas header blog (top navbar menu) antara lain memanfaatkan ruang di atas header.

Tampilan blog juga jadi lebih terkesan profesional, selain memudahkan pengunjung mengeksplorasi blog kita.

Berikut ini CB share beberapa desain topbar navigasi menu di atas blog header blog yang responsive dan statis. Desain pertama tampilannya seperti ini:

Navigasi Menu di Atas Header Blog
Tampilan di HP/Mobile Responsive

Navigasi Menu di Atas Header Blog
Tampilan Desktop.

Cara #1 Membuat Navigasi Menu di Atas Header - Responsive

1. Template > Edit HTML
2. Pasang kode HTML berikut ini di bawah kode <body> atau <body ...ada kode lain... .>

<ul class="topnav" id="myTopnav">
<li><a href="/">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/sitemap.html">Sitemap</a></li>
<li><a href="/p/kontak.html">Kontak</a></li>
<li><a href="/p/disclaimer.html">Disclaimer</a></li>

<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
</li>
</ul>

Catatan:
Kode di atas sudah dilengkapi link ke halaman statis About, Sitemap, Kontak, dan Disclaimer. Anda tinggal membuat halaman statis dengan nama/judul halaman yang persis sama: About, Sitemap, Kontak, Disclaimer 

3. Pasang Kode CSS Topbar Navigasi Menu di atas Header Blog berikut ini di atas kode ]]></b:skin> atau awali denga kode <style> dan akhiri dengan kode </style> jika akan disimpan di atas kode </head>

/* Topbar Navmenu */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}

@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}

4. Pasang Kode Add JavaScript berikut ini di atas kode </head> atau </body> atau di bawah kode HTML (kode di no. 2)

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>


5. Save Template!

Source


RESPONSIVE PLUS SOCIAL MEDIA?
Jika ingin Top Menu di atas Header Blog plus link Media Sosial, silakan terapkan: Top Menu Navigasi Responsive plus Media Sosial

Cara #2 Membuat Navigasi Menu di Atas Header Blog

1. Template > Edit HTML
2. Cari/Temukan (CTRL+F) kode  ]]></b:skin> 
3. Simpan kode berikut ini DI ATAS kode tersebut

/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
#navbar-iframe {display: none !important;}

NB: 
- Sesuaikan lebarnya (width:950px) dengan lebar header template Anda.
- Jika mau ganti background > background:#eeeded; (Lihat Kode Warna HTML)
- Ganti warna huruf menu > color:#222;

4. Cari/Temukan (CTRL+F) kode <body>
5. Simpan kode berikut ini DI BAWAH-nya.

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://cbtheme.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

NB: Ganti link http://cbtheme.blogspot.com dan nama menu-nya dengan versi Anda.

6. Save Template!

Demikian cara Membuat Navigasi Menu di Atas Header Blog yang sudah diujicoba dan BERHASIL.

MAU DIBUAT JADI MENU STATIS?
Mau dibuat jadi static menu alias sticky alias melayang (floating), yakni tetap muncul saat halaman discroll ke bawah? Ini caranya: Cara Membuat Statis Menu.

Good Luck and Happy Blogging! (http://www.contohblog.com).*

Thanks for reading & sharing Cara Membuat Navigasi Menu di Atas Header Blog

Previous
« Prev Post

67 comments:

Comment Page:
  1. Udah ane pasang, tapi fontnya besar semua, cara ganti jadi font normal kayak punya cb diatas gimana?

    ReplyDelete
    Replies
    1. Ganti text-transform:uppercase;} dengan text-transform:none;} atau hapus saja kode tersebut

      Delete
    2. Thanks min, sangat membantu :)

      Delete
    3. min, ane uda ikutin semua cara di atas, tapi napa kaga aada muncul apa" ya min. Tolong min.

      Delete
  2. thanks sob infonya .
    kunjungi juga blog ane y , Maklum blog baru :D

    ReplyDelete
  3. Gan,,
    ane udah ikuti cara ini,,
    tpi knp Top Menunya gak responsif ya?
    ada solusinya gak gan?
    Thanks.

    ReplyDelete
    Replies
    1. sama gan saya juga gak responsive

      Delete
  4. terimakasih gan, sangat berguna dan sudah berhasil sy terapkan

    ReplyDelete
  5. kalau udah pake theme hasil download bisa lgi ga mas di pasang navi atas gitu...takut rusak blognya ni..

    ReplyDelete
    Replies
    1. bisa banget, gakkan rusak, gak ngaruh sama tampilan lain....

      Delete
  6. kok gak bisa di terapkan ke blo ini,, fikriazzami.blogspot

    ReplyDelete
    Replies
    1. coba lagi, ikuti langkahnya dengan benar

      Delete
  7. kalo dipasang di template Pro google themes ada efek negatif nya ga ya ?

    ReplyDelete
  8. Letak code :

    .page-menu {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #3a5795;
    border-bottom: 1px solid #133783;
    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);
    }

    .page-menu li a {
    color: #ddd;
    font-size: 12px;
    font-family: Oswald,Arial,Helvetica,Tahoma,sans-serif;
    text-decoration: none;
    text-transform: none;
    padding: 0 10px;
    border-right: 1px dotted #9c9c9c;
    }

    itu dimana ya mas ?

    ReplyDelete
    Replies
    1. di atas < div class = content-wrapper >

      Delete
  9. Work gan , tapi kalo mau pengen nambahin icon social media gimana gan :) , di tunggu jawabnaya Hubungi saya gan http://sarnujitea@gmail.com

    ReplyDelete
  10. tapi kalo saat di scroll ke bawah mengikuti gimana ya ?

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2014/05/menu-navigasi-blog-tetap-muncul-melayang.html

      Delete
  11. gan caranya ngasih isi content menunya gimana ya gan?

    ReplyDelete
  12. Thank you Gan, ane berhasil. Tapi kalo boleh nanya, gimana cara menambah logo twitter,g+, facebook, seperti blog CB diatas?

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2015/03/navigasi-menu-responsive-plus-drop-down.html

      Delete
    2. Responsive banget balasannya. Thanks a lot ya Gan.

      Delete
  13. Maapin ane CB, blum pde menyertakan link active atau minta kunjungan balik. Maklum baru belajar dari nol. Ane juga g ada modus jualan apa2 cuman iseng nanya karena tertarik sama artikelnya. btw, alamat CB yang http://contohblognih.blogspot.com/2015/03/navigasi-menu-responsive-plus-drop-down.html sudah ane kunjungin tapi ane jadi bingung harus diapain, hasil nya terputus-putus trus icon fb,g+ dll g muncul. Mungkin kesalahan ane, nanti dicoba lagi. Thnks.

    ReplyDelete
  14. hallo, saya sudah terapkan tapi kok muncul dibawah ya mas? hehe

    ReplyDelete
    Replies
    1. Salah nyimpen kode HTML, liat lagi panduannya

      Delete
  15. Mas cara bikin menu navigasi kya blog ini gimana mas ? biarpun discroll ke bawah tetep nyangkut di atas :D

    kalau ada tutornya saya minta linknya mas.

    ReplyDelete
    Replies
    1. http://contohblognih.blogspot.com/2014/05/menu-navigasi-blog-tetap-muncul-melayang.html

      Delete
  16. mf min, punya ane malah jd kayak gini yang muncul

    /*CB Top Menu*/ #top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;} #top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;} #navwrap {margin: 0px auto; width:560px; float:left;background:#080705;} .topnav ul {list-style:none;margin:0;padding:0px; float:left;} .topnav li {float:left;margin:0;text-align:center;} .topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;} .topnav li a {background:none; } .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#222;} #navbar-iframe {display: none !important;}

    ditunggu..:)

    ReplyDelete
  17. Gk bisa gan , emang gk cocok kali sama Template ane ..

    ReplyDelete
  18. Nah, penting banget nih untuk template blogger seperti New Thesis V3 yang tidak memiliki Navigasi Menu diatas Header Blog. By the way saya salah satu user dari template blogger NTV3 ini loh :)

    ReplyDelete
  19. Hallo gan salam kenal dari saya, terima kasih atas tutorialnya sangat bermanfaat, saya udah coba dan berhasi. Saya mau tanya, saya udah buat menu bar home, kontak dsb yang dibuat dengan cara didesain tata letak dan tambahkan laman tapi posisinya ada di bawah judul blog dan punya agan ada di atas (header), saya ingin posisinya di balik gan, yang saya bikin dari desain blog saya ada di atas sedangkan yang dari agan ada di bawah, tolong pencerahannya gan, terima kasih

    ReplyDelete
    Replies
    1. tinggal dituker tempat aja kodenya, sentralnya kan kode < div header >
      Tapi saran CB sih, gak usah neko-neko, nanti malah error, google tidak merhatiin urusan posisi navigasi menu, yang penting ada

      Delete
  20. kang ko punya ane mah munculnya di bawah footer ya, kenapa ya?

    ReplyDelete
    Replies
    1. ya karena kode html-nya disimpan di bawah footer, bukan di atas header

      Delete
  21. biar jadi rata tengah gimana gan? saya coba ubah floatnya jadi center tapi rata tengahnya jadi satu-satu baris per-laman ke bawah, gak lanjut jadi satu baris. gimana itu gan? tapi terima kasih setidaknya sudah membantu.

    ReplyDelete
  22. mas,, template kayak blog nya mas ini ada link download nya gak...???

    ReplyDelete
    Replies
    1. gak ada... ini special designed by and for cb blogger :)

      Delete
  23. mantab gan, untuk memperpendek ukuran backgroundnya gimana ya gan? maklum newbie

    ReplyDelete
  24. Membantu banget gan, terimakasih. semoga makin sukses.

    ReplyDelete
  25. mas kalo ga ada kode ky gitu gimana ya?

    ReplyDelete
  26. cara mengatur lebar biar sejajar dengan header kox gak bisa gan !!!

    ReplyDelete
  27. maaf mas,saya sudah coba pasang di blog saya,dan berhasil,tetapi waktu di klik bagiannya,ko ga muncul isinya contohnya tentang saya.malah kesitu situ lagi.apa yang salah y.mohon jawabannya

    ReplyDelete
  28. Sukses sih, tapi lagi nyari cara supaya pas di buka lewat browser hp bawaan nggak melebar kesamping. Kurang responsive di tampilan layar ponsel (?m=1) knp ya mas? Kalo lewat Ucweb sih lancar, tapi di browser bawaan hape tampilan nya melebar kesamping kanan. Ada solusi mas? Thanks :)

    ReplyDelete
  29. mas kalau mau masangnya di tengah bagaimana ?
    apa yang harus di rubah

    ReplyDelete
    Replies
    1. di bawah header maksudnya? simpan aja kode kedua di bawah kode header, kalo di bawah menu utama, simpan di bawah kode main-menu, kalo mau di footer juga bisa, dimpan saja di atas atau bawah kode footer, begitu seterusnya

      Delete
    2. kalau mau jadikan jadi transparan bagai mana tuh mas , aku coba masih ada garis putih kecil di bawahnya tuh

      Delete
  30. tapi gak responsive gan waktu dibuka lewat smartphone :( bisa dibantu gak

    ReplyDelete
  31. Terimakasih sangat membantu

    ReplyDelete
  32. masih ikut memahami..., karena masih sangat awam.
    matur nuwun mas bosss...

    ReplyDelete
  33. kawan cara buatnya di tengah atas alias center. yg di ubah di kolom 2 apanya??

    ReplyDelete
  34. makasih mas, seharian muter2 nemu juga,,

    ReplyDelete
  35. terimakasih mas,, bermanfaat banget . hampir setress aku gara gara koding ini gak nemu nemu

    ReplyDelete
  36. This comment has been removed by the author.

    ReplyDelete
  37. gan aku ikuti perintah tutorialnya kok gak muncul ya..ada yang salah kali ya,aku nerapinnya..trims.

    ReplyDelete
  38. Terima kasih, Matur suwun
    Sukses aja

    ReplyDelete
  39. Thank's ya gans atas infonya keren abis

    ReplyDelete
  40. Yang nomor dua sudah saya coba dan berhasil mas. thanks mas
    Terus kalo memasang menu navigasi di atas header yang seperti di blog mas ini gimana caranya mas? ada nggak tutorialnya?

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox