Cara Membuat Top Menu Statis (Melayang) di Blog

Romeltea | Follow @romel_tea

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

Previous
« Prev Post
Author Image

Romeltea
Romeltea adalah onair dan online name Asep Syamsul M. Romli aka Kang Romel. Praktisi Media, Blogger, Trainer Komunikasi from Bandung, Indonesia. Follow me: facebook twitter instagram linkedin youtube

Recommended Posts

Related Posts

Show comments
Hide comments

8 comments on Cara Membuat Top Menu Statis (Melayang) di Blog

  1. Thanks artikelnya gan :) di tunggu artikel yang lainnya

    ReplyDelete
  2. nuhun bang blogromeltea.. :D

    ReplyDelete

  3. 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

    ReplyDelete
  4. Sudah berbagai tutorial lain yg saya ikuti tpi blm berhasil,,,baru ikut tutorial kang Romel bru nyata hsilnya,,,trimksih kang,,,smoga bernilai ibadah.salam

    ReplyDelete

No Spam, Please!