Cara Membuat Header Bar (Top Menu) Mirip Facebook
January 10, 2015
CB memang sengaja mengubah Top Menu itu menjadi mirip Facebook dengan tujuan utama biar "user friendly". Pengunjung sudah terbiasa dengan tampilan itu sehingga diharapkan "betah" buka-buka blog ini.
Ini kode warna biru background header bar Facebook: #3a5795
Anda ingin juga membuatnya di blog Anda? Ini dia Cara Membuat Header Bar (Top Menu) Mirip Facebook:
1. Yang belum pasang Top Menu, cek Cara Membuat Top Menu Bar di Atas Header Blog.
2. Sesuaikan warna background dan hurufnya dengan kode berikut ini:
.page-menu {
width: 100%;
margin: 0 auto;
padding: 0;
background-color: #3a5795;
border-bottom: 1px solid #133783;
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);
}
.page-menu li a {
color: #ddd;
font-size: 12px;
font-family: Oswald,Arial,Helvetica,Tahoma,sans-serif;
text-decoration: none;
text-transform: none;
padding: 0 10px;
border-right: 1px dotted #9c9c9c;
}
width: 100%;
margin: 0 auto;
padding: 0;
background-color: #3a5795;
border-bottom: 1px solid #133783;
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);
}
.page-menu li a {
color: #ddd;
font-size: 12px;
font-family: Oswald,Arial,Helvetica,Tahoma,sans-serif;
text-decoration: none;
text-transform: none;
padding: 0 10px;
border-right: 1px dotted #9c9c9c;
}
3. Posisikan <div class='page-menu'> di atas kode <div class='content-wrapper'>
4. Untuk menampilkannya agar statis, melayang, sticky, atau tetap muncul saat blog discroll seperti di blog CB ini, silakan Copy & Paste kode berikut ini di atas kode </body> (kode ini ada bagian bawah template).
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.page-menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.page-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.page-menu').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.page-menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.page-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.page-menu').css({ 'position': 'relative' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
5. Save Template!
Itu dia Cara Membuat Header Bar (Top Menu) Mirip Facebook. Jika Anda menggunakan template blog New Johny Wuss V3, otomatis top menu tersebut ada.
Bagi pengguna template New Johny Wuss V1 & V2 tinggal mengubah kode dengan mengikuti langkah di atas.
CARA MEMBUAT TOP MENU BARU
Bagi pengguna template lain dan belum ada Top Menu di atas Header Blognya, buat dulu dengan membuka link di No. 1 di atas, atau bisa juga coba cara berikut ini.
Kode-kode berikut ini bukan saja akan membuat Top Menu Bar di atas Header Blog, tapi juga --seperti top menu bar di blog CB ini-- juga akan "melayang", statis, atau tetap tampil saat scroll ke bawah --benar-benar mirip header bar Facebook! (Lihat juga demonya di Cibi Blogger). Template New Johny Wuss V3 juga sudah menggunakan Top Menu Bar mirip Faceook ini.
1. Template > Edit HTML.
2. Copas kode berikut ini di atas kode ]]></b:skin>
Bagi pengguna template New Johny Wuss V1 & V2 tinggal mengubah kode dengan mengikuti langkah di atas.
CARA MEMBUAT TOP MENU BARU
Bagi pengguna template lain dan belum ada Top Menu di atas Header Blognya, buat dulu dengan membuka link di No. 1 di atas, atau bisa juga coba cara berikut ini.
Kode-kode berikut ini bukan saja akan membuat Top Menu Bar di atas Header Blog, tapi juga --seperti top menu bar di blog CB ini-- juga akan "melayang", statis, atau tetap tampil saat scroll ke bawah --benar-benar mirip header bar Facebook! (Lihat juga demonya di Cibi Blogger). Template New Johny Wuss V3 juga sudah menggunakan Top Menu Bar mirip Faceook ini.
2. Copas 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>
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!
Itu dia Cara Membuat Header Bar (Top Menu) Mirip Facebook di Blog Anda. Good Luck!
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Romeltea
waaaaaaaahhhhh ini yang ditunggu2 CB...
ReplyDelete:D
langsung ane terapkan,
tolong kasih tutorial membuat menu spt itu + kotak pencarian disampingnya
ReplyDeleteCara membuat top menu plus kotak pencarian:
Deletehttp://contohblognih.blogspot.com/2014/06/Top-Menu-Plus-Kotak-Pencarian-header-blog.html
om hasilnya edit saya ko begini ya
ReplyDeletehttp://mitrabintang.blogspot.com/
Pindahkan/posisikan kode < div class='page-menu '> ... < /div > di atas kode < div class='content-wrapper' >
Deletetrimakasih om, work :D
Deleteidah di praktekin gan dan berhasil... tp header blognya ketutup dikit gimana solusinya yah
ReplyDeletepadding-top: 45px, ubah angka 45 jadi 50, 60, atau berapa saja yang "pas"
DeleteTerimakasih atas informasinya ya..!! artikelnya sangat bermanfaat sekali.
ReplyDeletesemoga artikel ini memberikan manfaat untuk orang-orang yang sudah membacanya.
Daftar Facebook
gan kalo kagak ada head gimana gan?
ReplyDeleteane cari cuman < /head > aja
kalo ada < / head > pasti ada < head > dong, itu kan kode penutup < head > :)
Deleteapa salah saya? save template tidak menyimpan...
ReplyDeletecoba dong kasih tutorial cara membuat header seperti blognya strukturkode.blogspot.com
ReplyDelete