» » Cara membuat Navbar Keren di Blog Kalian

Cara membuat Navbar Keren di Blog Kalian



Manfaat navigasi menu di atas header blog (top navbar menu) antara lain memanfaatkan ruang di atas header.
Selain itu Tampilan blog juga jadi lebih terkesan profesional, selain memudahkan pengunjung mengeksplorasi blog kita.

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





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!

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='https://indobay-web.blogspot.co.id/' title='Top Menu'>Top Menu</a></li>
<li><a href='https://indobay-web.blogspot.co.id/' title='Contact'>Contact</a></li>
<li><a href='https://indobay-web.blogspot.co.id/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='https://indobay-web.blogspot.co.id/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='https://indobay-web.blogspot.co.id/' title='Facebook'>Facebook</a></li>
<li><a href='https://indobay-web.blogspot.co.id/' title='Twitter'>Twitter</a></li>
<li><a href='https://indobay-web.blogspot.co.id/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

NB: Ganti link https://indobay-web.blogspot.co.id dan nama menu-nya dengan versi Anda.


6. Save Template!

Demikian cara Membuat Navigasi Menu di Atas Header Blog yang sudah diujicoba dan BERHASIL.
Share on Facebook
Share on Twitter
Share on Google+
Share on LinkedIn

Subscribe to receive free email updates:

2 Responses to "Cara membuat Navbar Keren di Blog Kalian"

  1. Wulandaru Wisesa1 Desember 2019 pukul 09.20

    Udah bisa. Cuma sy kira tadinya navbar kyk di blog ini. Ternyata beda. Icon garis 3 nya kok gak keluar ya gan. Mohon pencerahan

    BalasHapus
  2. Anonim13 Maret 2022 pukul 00.33

    Cara Membuat Navbar Keren Di Blog Kalian >>>>> Download Now

    >>>>> Download Full

    Cara Membuat Navbar Keren Di Blog Kalian >>>>> Download LINK

    >>>>> Download Now

    Cara Membuat Navbar Keren Di Blog Kalian >>>>> Download Full

    >>>>> Download LINK

    BalasHapus

Silakan Komentar dan Saran Yang Sopan

Langganan: Posting Komentar (Atom)