Cara Membuat Top Menu Statis (Melayang) di Blog
Romeltea | Follow @romel_tea
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.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;}
* 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>
<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;
}
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
« Prev Post
Next
Next Post »
Next Post »
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
Thanks atas infonya gan :)
ReplyDeleteThanks artikelnya gan :) di tunggu artikel yang lainnya
ReplyDeletetest test tes komen
ReplyDeletekren
ReplyDeletenuhun bang blogromeltea.. :D
ReplyDelete
ReplyDelete4. 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
Sudah berbagai tutorial lain yg saya ikuti tpi blm berhasil,,,baru ikut tutorial kang Romel bru nyata hsilnya,,,trimksih kang,,,smoga bernilai ibadah.salam
ReplyDeleteSama-sama, Amin YRA...
Delete