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!
0 komentar:
Post a Comment