Blog Ghifari

Cara Membuat Header Bar (Top Menu) Mirip Facebook

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYQIuV9znzPV7tdoXesBpsmSLBxPrbWvgMSm8LRoMjQ5213kqQHexAGWkC69q9370I_rOPX4Bra5C9-NY1bhWZ1e44xzcpEzb_tdJEdNTlHhWF3x3LpX-C8vLW144cRuFRYve2kJCSMhe/s1600/header+bar+top+menu+blog+mirip+facebook.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Header Bar (Top Menu) Mirip Facebook" border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSYQIuV9znzPV7tdoXesBpsmSLBxPrbWvgMSm8LRoMjQ5213kqQHexAGWkC69q9370I_rOPX4Bra5C9-NY1bhWZ1e44xzcpEzb_tdJEdNTlHhWF3x3LpX-C8vLW144cRuFRYve2kJCSMhe/s1600/header+bar+top+menu+blog+mirip+facebook.jpg" title="Cara Membuat Header Bar (Top Menu) Mirip Facebook" width="320" /></a></div>
<b>SEJAK</b> 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.<br />
<h2>
</h2>
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.<br />
<blockquote class="tr_bq">
<b>Ini kode warna biru background header bar Facebook: #3a5795</b></blockquote>
<br />
Anda ingin juga membuatnya di blog Anda? Ini dia Cara Membuat Header Bar (Top Menu) Mirip Facebook:<br />
<br />
1. Yang belum pasang Top Menu, cek <a href="http://contohblognih.blogspot.com/2014/06/Navigasi-Menu-Diatas-Header-Blog.html" target="_blank">Cara Membuat Top Menu Bar di Atas Header Blog</a>.<br />
2. Sesuaikan warna background dan hurufnya dengan kode berikut ini:<br />
<br />
<div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">
.page-menu {<br />
width: 100%;<br />
margin: 0 auto;<br />
padding: 0;<br />
<b><span style="color: red;">background-color: #3a5795;</span></b><br />
<b><span style="color: red;">border-bottom: 1px solid #133783;</span></b><br />
-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);<br />
}<br />
<br />
.page-menu li a {<br />
<b><span style="color: red;">color: #ddd;</span></b><br />
font-size: 12px;<br />
font-family: Oswald,Arial,Helvetica,Tahoma,sans-serif;<br />
text-decoration: none;<br />
text-transform: none;<br />
padding: 0 10px;<br />
border-right: 1px dotted #9c9c9c;<br />
}</div>
<br />
3. Posisikan<span style="color: red;"> <div class='page-menu'></span> di atas kode <span style="color: red;"><div class='content-wrapper'></span><br />
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 <b></body></b> (kode ini ada bagian bawah template).<br />
<br />
<div style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 10px;">
<script type='text/javascript'><br />
//<![CDATA[<br />
$(document).ready(function() {<br />
    var stickyNavTop = $('.page-menu').offset().top;<br />
    var stickyNav = function(){<br />
        var scrollTop = $(window).scrollTop(); <br />
        if (scrollTop > stickyNavTop) {<br />
            $('.page-menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });<br />
        } else {<br />
            $('.page-menu').css({ 'position': 'relative' });<br />
        }<br />
    };<br />
    stickyNav();<br />
    $(window).scroll(function() {<br />
        stickyNav();<br />
    });<br />
});<br />
//]]><br />
</script></div>
<br />
5. Save Template!<br />
<div>
<br /></div>
<div>
Itu dia Cara Membuat Header Bar (Top Menu) Mirip Facebook. Jika Anda menggunakan template blog <a href="http://newjohnywussv3.blogspot.com/" target="_blank">New Johny Wuss V3</a>, otomatis top menu tersebut ada.<br />
<br />
Bagi pengguna template New Johny Wuss V1 &  V2 tinggal mengubah kode dengan mengikuti langkah di atas.<br />
<br />
<b>CARA MEMBUAT TOP MENU BARU</b><br />
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.<br />
<div>
<br />
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 <i>scroll</i> ke bawah --benar-benar mirip header bar Facebook! (Lihat juga demonya di <a href="http://cibiblogger.blogspot.com/" target="_blank">Cibi Blogger</a>). Template <a href="http://newjohnywussv3.blogspot.com/" target="_blank">New Johny Wuss V3</a> juga sudah menggunakan Top Menu Bar mirip Faceook ini.<br />
<br /></div>
1. Template > Edit HTML.<br />
2. Copas kode berikut ini di atas kode <b>]]></b:skin></b> </div>
<div>
<br />
<div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">
<div>
<br />
* html #top{position:absolute}<br />
#top {margin: auto;padding: 10px 10px 0 10px;width: 100%;background: #3a5795;border-bottom: 1px solid #133783;z-index: 100;height: <span style="color: red;">40px</span>;}<br />
#top-wrap {margin:auto;padding: 0;width: 950px;background:#3a5795;}<br />
#navwrap {margin: 0px auto; width:100%; float:left;background:#080705;}<br />
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}<br />
.topnav li {float:left;margin:0;text-align:center;}<br />
.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;}<br />
.topnav li a {background:none; }<br />
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#444; color:#f2f2f2;}</div>
</div>
<br />
3.Copas kode berikut ini di bawah kode <b><body></b> atau di atas kode <b></body></b>.</div>
<div>
<br />
<div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">
<div>
<div id='top' style='position:fixed'><br />
<div id='top-wrap'><br />
<div class='topnav'><br />
<ul id='topnav'><br />
  <li><a href='#'>About</a></li><br />
  <li><a href='#'>Contact</a></li><br />
  <li><a href='#'>Sitemap</a></li><br />
  <li><a href='#'>Privacy Policy</a></li><br />
  </ul><br />
</div><br />
</div><br />
</div></div>
</div>
<b><br /></b>4. Tambahkan kode <span style="color: blue;">padding-top: 45px;</span> di bawah elemen <span style="color: red;">#header-wrapper</span> atau <span style="color: red;">#outer-wrapper</span> seperti kode berikut ini:<br />
<b><br /></b>#outer-wrapper {<br />
width: 920px;<br />
background-color: #ffffff;<br />
margin: 0 auto;<br />
text-align: left;<br />
<span style="color: blue;">padding-top: 45px;</span><br />
}<br />
<br />
#header-wrapper {<br />
margin: 0px;<br />
background-color: transparent;<br />
<span style="color: blue;">padding-top: 45px;</span><br />
<br />
}<br />
<b><br /></b><b>5. Save Template!</b></div>
<div>
<br />
Itu dia Cara Membuat Header Bar (Top Menu) Mirip Facebook di Blog Anda. Good Luck!</div>

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