June 7, 2014

Cara Membuat Navigasi Menu di Atas Header Blog

June 7, 2014

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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

85 comments on Cara Membuat Navigasi Menu di Atas Header Blog

  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
  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
  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
  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. work gan , makasih infonya

    ReplyDelete
  20. 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
  21. 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
  22. 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
  23. 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
  24. mantab gan, untuk memperpendek ukuran backgroundnya gimana ya gan? maklum newbie

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

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

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

    ReplyDelete
  28. 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
  29. 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
  30. 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
  31. tapi gak responsive gan waktu dibuka lewat smartphone :( bisa dibantu gak

    ReplyDelete
  32. Terimakasih sangat membantu

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

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

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

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

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

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

    ReplyDelete
  39. Terima kasih, Matur suwun
    Sukses aja

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

    ReplyDelete
  41. 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
    Replies
    1. ada, silakan ketik "navigasi menu atas" di kotak pencarian

      Delete
  42. maaf bos mau nanya.kalau menyesuaiakan lebar ukuran main wrapper dan sidebar right wrapper yang ada bingkai garis gimana caranya.semua sudah saya coba tapi belum bisa berhasil.trims

    ReplyDelete
    Replies
    1. di kode itu pastinya ada kode width (lebar), nah itu dia angka yang harus diubah

      Delete
  43. ribet ya pake blogger, baru beli domain baru nyobain pake patform blogger..alamak mau ngatur2 juga susah pake coding.

    ReplyDelete
    Replies
    1. Coba kalau pake WordPress, lebih praktis. Hehe..

      Delete
  44. kalo ganti nama menu gi mana gan, yg cara 1

    ReplyDelete
  45. salam kenal om
    maaf om ane udah coba pas cari "body" gak ada ya.. terus dipasang di manalagi om?

    mohon percerahannya nih/.... hehehehe

    ReplyDelete
    Replies
    1. Kode template blogger PASTI ada kode body. kalau tidak ada pasti error

      Delete
    2. Ijin ngebantu bro
      Langkah yang nomor dua bukan? Coba pasangnya dibawah (/head), kasusnya sama gan

      Delete
  46. terimakasih, bari diweb ini sy cb bisa tp kendalanya pas klik menu laman tidak tersedia kenapa ya? padahal menu laman seperti kontak, disclaimer sdh ada, mohon bantuannya.tks

    ReplyDelete
  47. Kalau template premium apakah bisa dibuatin menu secara manual. Soalnya saya gak cocok dengan tampilan menu bawaan template.

    ReplyDelete
    Replies
    1. Menu bawaan template memang harus diedit sendiri sesuai dengan kecocokan bagi diri blogger

      Delete
  48. sangat membantu sob...thanks

    ReplyDelete
  49. kalau itu kan tidk ada sub menunya kalau dikasih sub menu scripnya bagaimana ? tolong jawabannya..?

    ReplyDelete
  50. Punya saya malah muncul di pojok kiri atas mas, ga bisa di tengah..
    Gimana solusinya?
    Thanks

    ReplyDelete
  51. sangat membantu terimakasih.

    ReplyDelete
  52. Ma Kaciiih Gan!, it's work, tapi kalau mau buat biar Hurufnya jadi Bold gimana ya Gan?

    ReplyDelete
  53. om cara agar rata ke kanan gimana?

    ReplyDelete
  54. gan gimana caranya buat navigasi menunya beku, ketika di scroll ke bawah tetap ikut menunya??

    ReplyDelete

Contact Form

Name

Email *

Message *