Jaminan 100%

“Barangsiapa yang Allah kehendaki mendapatkan seluruh kebaikan, maka Allah akan memahamkan dia tentang agama.” (HR. Bukhari no. 71 dan Muslim no. 1037)

Akan hidup terus setelah mati

“Jika seorang manusia mati maka terputuslah darinya amalnya kecuali dari tiga hal; dari sedekah jariyah atau ilmu yang diambil manfaatnya atau anak shalih yang mendoakannya.” .

Free Consultations

Konsultasi gratis di halaman Konsultasi. Konsultasi via email abuhening@gmail.com hanya untuk Layanan klien.

Cara Membuat Header Bar (Top Menu) Mirip Facebook

Posted by


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!


Demo Blog NJW V2 Updated at: 22:14

0 comments:

Post a Comment

Disarankan berkomentar menggunakan Akun Google+. Komentar SPAM dan SPAMMY (menyertakan link hidup, minta kunjungan balik, & nama blog) otomatis tidak akan muncul. Silahkan di Copy dan di Share kalau di rasa bermanfaat tidak perlu izin. Jika menginginkan Link Tinggalkan alamat Email, Sebelum bertanya, Cari Dulu di Kotak Pencarian! Thx