Cara Membuat Top Menu Statis (Melayang) di Blog

Posted by | Follow @romeltea

Cara Membuat Top Menu Statis (Melayang) di Blog
TOP MENU (navigasi menu atas) atau header bar statis, sticky, atau melayang (floating) di atas header blog menjadi salah satu trend desain website/blog 2015.

Situs-situs ternama sudah melakukannya, seperti Facebook, Yahoo, Twitter, juga sejumlah situs berita seperti Okezone dan Viva News.

Yang dimaksud Top Menu Statis yaitu navigasi menu (header bar) yang tetap muncul saat halaman blog di-scroll. Silakan scroll halaman ini, menunya tetap muncul 'kan? Cek juga Facebook, header barnya tetap muncul 'kan meski discroll ke bawah?

Itu dia trending desain. Yuk, ikuti!

Cara Membuat Top Menu Horisontal Statis/Melayang di Blog

Tips berikut ini akan membuat Top Menu Bar mirip Faceook dari sisi statis dan warna birunya.

1. "Template" > "Edit HTML"
2. Copy & Paste kode berikut ini di atas kode ]]></b:skin> 

<!-- Top Menu Bar Like Facebook -->
* html #top{position:absolute}
#top {margin: auto;padding: 10px 10px 0 10px;width: 100%;background: #3a5795;border-bottom: 1px solid #133783;z-index: 100;height: 40px;}
#top-wrap {margin:auto;padding: 0;width: 950px;background:#3a5795;}
#navwrap {margin: 0px auto; width:100%; 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:12px;display:block;padding:10px 10px;color:#f2f2f2;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:#444; color:#f2f2f2;}

3.Copas kode berikut ini di bawah kode <body> atau di atas kode </body>.

<div id='top' style='position:fixed'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Sitemap</a></li>
  <li><a href='#'>Privacy Policy</a></li>
  </ul>
</div>
</div>
</div>

* Ganti kode pagar (#) dengan link menu yang dimunculkan. Misalnya jadi begini:

<li><a href='http://iniblogdemo.blogspot.com/p/about.html'>About</a></li>

4. Tambahkan kode padding-top: 45px; di bawah elemen #header-wrapper atau #outer-wrapper seperti kode berikut ini:

#outer-wrapper {
width: 920px;
background-color: #ffffff;
margin: 0 auto;
text-align: left;
padding-top: 45px;
}

#header-wrapper {
margin: 0px;
background-color: transparent;
padding-top: 45px;
}

5. Save Template!

Selamat! Top Menu Horizontal mirip header bar Facebook sudah muncul di Blog Anda. (http://blogromeltea.blogspot.com).*

» Thanks for reading Cara Membuat Top Menu Statis (Melayang) di Blog

Tags: Desain Blog
6 Komentar untuk "Cara Membuat Top Menu Statis (Melayang) di Blog"

Thanks artikelnya gan :) di tunggu artikel yang lainnya

nuhun bang blogromeltea.. :D


4. Tambahkan kode padding-top: 45px; di bawah elemen #header-wrapper atau #outer-wrapper seperti kode berikut ini:

#outer-wrapper {
width: 920px;
background-color: #ffffff;
margin: 0 auto;
text-align: left;
padding-top: 45px;
}

#header-wrapper {
margin: 0px;
background-color: transparent;
padding-top: 45px;
}
ini di pasang di mana bingung om

No Spam, Please!

Back To Top