Cara Membuat Top Menu Statis (Melayang) di Blog

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

Thanks for reading Cara Membuat Top Menu Statis (Melayang) di Blog | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

6 komentar

Tulis komentar
Monday, April 06, 2015 delete

Thanks artikelnya gan :) di tunggu artikel yang lainnya

Reply
avatar
Haryono
AUTHOR
Sunday, December 27, 2015 delete

nuhun bang blogromeltea.. :D

Reply
avatar
Ryzal M
AUTHOR
Monday, December 05, 2016 delete


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

Reply
avatar

No Spam, Please!