Home » » Cara Membuat Header Bar (Top Menu) Mirip Facebook

Cara Membuat Header Bar (Top Menu) Mirip Facebook

Cara Membuat Header Bar (Top Menu) Mirip Facebook
SEJAK Contoh Blog (CB) mengubah tampilan Top Menu Bar (Header Bar) menjadi mirip Facebook, terutama soal warna birunya, banyak pengunjung yang bertanya tentang bagaimana Cara Membuat Header Bar (Top Menu) Mirip Facebook itu.

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;
}

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>

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> 

<!-- 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>

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!

Thanks for reading & sharing Cara Membuat Header Bar (Top Menu) Mirip Facebook

Previous
« Prev Post

11 comments:

Comment Page:
  1. waaaaaaaahhhhh ini yang ditunggu2 CB...
    :D
    langsung ane terapkan,

    ReplyDelete
  2. tolong kasih tutorial membuat menu spt itu + kotak pencarian disampingnya

    ReplyDelete
    Replies
    1. Cara membuat top menu plus kotak pencarian:
      http://contohblognih.blogspot.com/2014/06/Top-Menu-Plus-Kotak-Pencarian-header-blog.html

      Delete
  3. om hasilnya edit saya ko begini ya
    http://mitrabintang.blogspot.com/

    ReplyDelete
    Replies
    1. Pindahkan/posisikan kode < div class='page-menu '> ... < /div > di atas kode < div class='content-wrapper' >

      Delete
    2. trimakasih om, work :D

      Delete
  4. idah di praktekin gan dan berhasil... tp header blognya ketutup dikit gimana solusinya yah

    ReplyDelete
    Replies
    1. padding-top: 45px, ubah angka 45 jadi 50, 60, atau berapa saja yang "pas"

      Delete
  5. Terimakasih atas informasinya ya..!! artikelnya sangat bermanfaat sekali.
    semoga artikel ini memberikan manfaat untuk orang-orang yang sudah membacanya.
    Daftar Facebook

    ReplyDelete
  6. gan kalo kagak ada head gimana gan?
    ane cari cuman < /head > aja

    ReplyDelete
    Replies
    1. kalo ada < / head > pasti ada < head > dong, itu kan kode penutup < head > :)

      Delete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox