Tentukan sendiri jalan cerita selanjutnya.

Tentukan sendiri jalan cerita selanjutnya.
SET YOURSELF THE NEXT STORY

Ads : 1 USD forever

This blog started to be written January 11, 2015.
Advertise your products and services here.
With 1 USD then your ad posted in the article forever.
1 USD per article forever.

A story with tens of thousands of articles.

A story with tens of thousands of articles.
life and death, blessing and cursing, from the main character in the hands of readers.

Campaign : Support my book "The ultimate guide to get life on earth as in heaven."

Campaign : Support my book "The ultimate guide to get life on earth as in heaven."
Campaign started October 17, 2015 (45 days)

Your contribution to my campaign

Thursday, March 5, 2015

Cara Membuat Navigasi Menu di Atas Header Blog.


top menu di atas header blog

Cara Membuat Navigasi Menu di Atas Header Blog

TUJUAN navigasi menu di atas header blog (top navbar menu) antara lain memanfaatkan ruang di atas header.

Tampilan blog juga jadi lebih terkesan profesional, selain memudahkan pengunjung mengeksplorasi blog kita. (DEMO)

Langkahnya membuat top navigasi menu:
1. Template > Edit HTML
2. Cari/Temukan (CTRL+F) kode  ]]></b:skin> 
3. Simpan kode berikut ini DI ATAS kode tersebut

/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; 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:11px;display:block;padding:10px 10px;color:#222;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:#ffffff; color:#000000;}
#navbar-iframe {display: none !important;}

NB: 
- Sesuaikan lebarnya (width:950px) dengan lebar header template Anda.
- Jika mau ganti background > background:#eeeded; (Lihat Kode Warna HTML)
- Ganti warna huruf menu > color:#222;

4. Cari/Temukan (CTRL+F) kode <body>
5. Simpan kode berikut ini DI BAWAH-nya.

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://cbtheme.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://cbtheme.blogspot.com/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

NB: Ganti link http://cbtheme.blogspot.com dan nama menu-nya dengan versi Anda.

6. Save Template!

Cara Membuat Navigasi Menu di Atas Header Blog sudah diujicoba dan BERHASIL diterapkan diCB Theme - Super Seo Blogger Template.

MAU DIBUAT JADI MENU STATIS?
Mau dibuat jadi static menu alias sticky alias melayang (floating), yakni tetap muncul saat halaman discroll ke bawah? Ini caranya: Cara Membuat Statis Menu.

Good Luck and Happy Blogging!
sumber : http://contohblognih.blogspot.com/2014/06/Navigasi-Menu-Diatas-Header-Blog.html

1 comment:

Related Posts

Related Posts Plugin for WordPress, Blogger...