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

Labels: Desain Blog

Related Posts

82 Komentar untuk "Cara Membuat Navigasi Menu di Atas Header Blog"

Udah ane pasang, tapi fontnya besar semua, cara ganti jadi font normal kayak punya cb diatas gimana?

Ganti text-transform:uppercase;} dengan text-transform:none;} atau hapus saja kode tersebut

Thanks min, sangat membantu :)

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

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

terimakasih gan, sangat berguna dan sudah berhasil sy terapkan

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

bisa banget, gakkan rusak, gak ngaruh sama tampilan lain....

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

coba lagi, ikuti langkahnya dengan benar

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

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 ?

di atas < div class = content-wrapper >

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

tapi kalo saat di scroll ke bawah mengikuti gimana ya ?

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

gan caranya ngasih isi content menunya gimana ya gan?

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

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

Responsive banget balasannya. Thanks a lot ya Gan.

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.

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

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

Salah nyimpen kode HTML, liat lagi panduannya

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.

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

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

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

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 :)

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

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

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

ya karena kode html-nya disimpan di bawah footer, bukan di atas header

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.

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

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

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

Membantu banget gan, terimakasih. semoga makin sukses.

mas kalo ga ada kode ky gitu gimana ya?

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

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

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 :)

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

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

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

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

sama gan saya juga gak responsive

Terimakasih sangat membantu

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

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

makasih mas, seharian muter2 nemu juga,,

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

This comment has been removed by the author. - Hapus

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

Terima kasih, Matur suwun
Sukses aja

Thank's ya gans atas infonya keren abis

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?

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

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

ada, silakan ketik "navigasi menu atas" di kotak pencarian

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

Coba kalau pake WordPress, lebih praktis. Hehe..

kalo ganti nama menu gi mana gan, yg cara 1

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

mohon percerahannya nih/.... hehehehe

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

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

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

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

Menu bawaan template memang harus diedit sendiri sesuai dengan kecocokan bagi diri blogger

sangat membantu sob...thanks

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

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *