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:
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
2. Cari/Temukan (CTRL+F) kode ]]></b:skin>
3. Simpan kode berikut ini DI ATAS kode tersebut
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.
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).*
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:
 |
| Tampilan di HP/Mobile Responsive |
 |
| 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()">☰</a>
</li>
</ul>
<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()">☰</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;
}
}
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>
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?
Cara #2 Membuat Navigasi Menu di Atas Header Blog
1. Template > Edit HTML2. 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;}
#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>
<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
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
Udah ane pasang, tapi fontnya besar semua, cara ganti jadi font normal kayak punya cb diatas gimana?
ReplyDeleteGanti text-transform:uppercase;} dengan text-transform:none;} atau hapus saja kode tersebut
DeleteThanks min, sangat membantu :)
Deletenever mind...........
Deletemin, ane uda ikutin semua cara di atas, tapi napa kaga aada muncul apa" ya min. Tolong min.
Deletethanks sob infonya .
ReplyDeletekunjungi juga blog ane y , Maklum blog baru :D
Gan,,
ReplyDeleteane udah ikuti cara ini,,
tpi knp Top Menunya gak responsif ya?
ada solusinya gak gan?
Thanks.
sama gan saya juga gak responsive
Deleteterimakasih gan, sangat berguna dan sudah berhasil sy terapkan
ReplyDeletekalau udah pake theme hasil download bisa lgi ga mas di pasang navi atas gitu...takut rusak blognya ni..
ReplyDeletebisa banget, gakkan rusak, gak ngaruh sama tampilan lain....
Deletekeren mas, thanks :)
ReplyDeletekaga bisa gua nih
ReplyDeletekok gak bisa di terapkan ke blo ini,, fikriazzami.blogspot
ReplyDeletecoba lagi, ikuti langkahnya dengan benar
Deletekalo dipasang di template Pro google themes ada efek negatif nya ga ya ?
ReplyDeleteLetak code :
ReplyDelete.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 >
DeleteWork gan , tapi kalo mau pengen nambahin icon social media gimana gan :) , di tunggu jawabnaya Hubungi saya gan http://sarnujitea@gmail.com
ReplyDeletetapi kalo saat di scroll ke bawah mengikuti gimana ya ?
ReplyDeletemakasih mas tutorialnya
ReplyDeletegan caranya ngasih isi content menunya gimana ya gan?
ReplyDeleteThank you Gan, ane berhasil. Tapi kalo boleh nanya, gimana cara menambah logo twitter,g+, facebook, seperti blog CB diatas?
ReplyDeletehttp://contohblognih.blogspot.com/2015/03/navigasi-menu-responsive-plus-drop-down.html
DeleteResponsive banget balasannya. Thanks a lot ya Gan.
DeleteMaapin 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.
ReplyDeletehallo, saya sudah terapkan tapi kok muncul dibawah ya mas? hehe
ReplyDeleteSalah nyimpen kode HTML, liat lagi panduannya
Deleteijin pasang gan... :-)
ReplyDeleteMas cara bikin menu navigasi kya blog ini gimana mas ? biarpun discroll ke bawah tetep nyangkut di atas :D
ReplyDeletekalau ada tutornya saya minta linknya mas.
mf min, punya ane malah jd kayak gini yang muncul
ReplyDelete/*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..:)
maksudnya?
DeleteGk bisa gan , emang gk cocok kali sama Template ane ..
ReplyDeleteNah, 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 :)
ReplyDeletework gan , makasih infonya
ReplyDeleteHallo 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
ReplyDeletetinggal dituker tempat aja kodenya, sentralnya kan kode < div header >
DeleteTapi saran CB sih, gak usah neko-neko, nanti malah error, google tidak merhatiin urusan posisi navigasi menu, yang penting ada
Sangat membantu :)
ReplyDeletekang ko punya ane mah munculnya di bawah footer ya, kenapa ya?
ReplyDeleteya karena kode html-nya disimpan di bawah footer, bukan di atas header
Deletebiar 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.
ReplyDeletemas,, template kayak blog nya mas ini ada link download nya gak...???
ReplyDeletegak ada... ini special designed by and for cb blogger :)
Deletemantab gan, untuk memperpendek ukuran backgroundnya gimana ya gan? maklum newbie
ReplyDeleteMembantu banget gan, terimakasih. semoga makin sukses.
ReplyDeletemas kalo ga ada kode ky gitu gimana ya?
ReplyDeletecara mengatur lebar biar sejajar dengan header kox gak bisa gan !!!
ReplyDeletesangat membantu
ReplyDeletemaaf 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
ReplyDeleteSukses 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 :)
ReplyDeletemas kalau mau masangnya di tengah bagaimana ?
ReplyDeleteapa 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
Deletekalau mau jadikan jadi transparan bagai mana tuh mas , aku coba masih ada garis putih kecil di bawahnya tuh
Deletetapi gak responsive gan waktu dibuka lewat smartphone :( bisa dibantu gak
ReplyDeleteTerimakasih sangat membantu
ReplyDeletemasih ikut memahami..., karena masih sangat awam.
ReplyDeletematur nuwun mas bosss...
kawan cara buatnya di tengah atas alias center. yg di ubah di kolom 2 apanya??
ReplyDeletemakasih mas, seharian muter2 nemu juga,,
ReplyDeleteterimakasih mas,, bermanfaat banget . hampir setress aku gara gara koding ini gak nemu nemu
ReplyDeleteThis comment has been removed by the author.
ReplyDeletegan aku ikuti perintah tutorialnya kok gak muncul ya..ada yang salah kali ya,aku nerapinnya..trims.
ReplyDeleteTerima kasih, Matur suwun
ReplyDeleteSukses aja
Thank's ya gans atas infonya keren abis
ReplyDeleteYang nomor dua sudah saya coba dan berhasil mas. thanks mas
ReplyDeleteTerus kalo memasang menu navigasi di atas header yang seperti di blog mas ini gimana caranya mas? ada nggak tutorialnya?
ada, silakan ketik "navigasi menu atas" di kotak pencarian
Deletemaaf 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
ReplyDeletedi kode itu pastinya ada kode width (lebar), nah itu dia angka yang harus diubah
Deleteribet ya pake blogger, baru beli domain baru nyobain pake patform blogger..alamak mau ngatur2 juga susah pake coding.
ReplyDeleteCoba kalau pake WordPress, lebih praktis. Hehe..
Deletekalo ganti nama menu gi mana gan, yg cara 1
ReplyDeletesalam kenal om
ReplyDeletemaaf 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
DeleteIjin ngebantu bro
DeleteLangkah 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
ReplyDeletecocokkan url linknya
DeleteKalau template premium apakah bisa dibuatin menu secara manual. Soalnya saya gak cocok dengan tampilan menu bawaan template.
ReplyDeleteMenu bawaan template memang harus diedit sendiri sesuai dengan kecocokan bagi diri blogger
Deletesangat membantu sob...thanks
ReplyDeletekalau itu kan tidk ada sub menunya kalau dikasih sub menu scripnya bagaimana ? tolong jawabannya..?
ReplyDeletePunya saya malah muncul di pojok kiri atas mas, ga bisa di tengah..
ReplyDeleteGimana solusinya?
Thanks
sangat membantu terimakasih.
ReplyDeleteMa Kaciiih Gan!, it's work, tapi kalau mau buat biar Hurufnya jadi Bold gimana ya Gan?
ReplyDeleteom cara agar rata ke kanan gimana?
ReplyDeletegan gimana caranya buat navigasi menunya beku, ketika di scroll ke bawah tetap ikut menunya??
ReplyDeleteItu ada di bagian akhir...
Delete