Cara Membuat Navigasi Menu di Atas Header Blog Responsive Keren

TUJUAN navigasi sajian 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 sajian di atas blog header blog yang responsive dan statis. Desain pertama tampilannya ibarat ini:

Cara Membuat Navigasi Menu di Atas Header Blog Responsive Keren Cara Membuat Navigasi Menu di Atas Header Blog
Tampilan di HP/Mobile Responsive

Cara Membuat Navigasi Menu di Atas Header Blog Responsive Keren Cara Membuat 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 instruksi <body> atau <body ...ada instruksi 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 menciptakan 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 instruksi ]]></b:skin> atau awali denga instruksi <style> dan akhiri dengan instruksi </style> jikalau akan disimpan di atas instruksi </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 instruksi </head> atau </body> atau di bawah instruksi 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 instruksi berikut ini DI ATAS instruksi 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 karakter sajian > color:#222;

4. Cari/Temukan (CTRL+F) instruksi <body>
5. Simpan instruksi 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 dibentuk jadi static sajian alias sticky alias melayang (floating), yaitu tetap muncul dikala halaman discroll ke bawah? Ini caranya: Cara Membuat Statis Menu.

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

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours