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.
UPDATE!!!
Tips Terbaru: Top Menu Navigasi Responsive plus Media Sosial
Tampilan blog juga jadi lebih terkesan profesional, selain memudahkan pengunjung mengeksplorasi blog kita.
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
TUJUAN navigasi menu di atas header blog (top navbar menu) antara lain memanfaatkan ruang di atas header.
UPDATE!!!
Tips Terbaru: Top Menu Navigasi Responsive plus Media Sosial
Tampilan blog juga jadi lebih terkesan profesional, selain memudahkan pengunjung mengeksplorasi blog kita.
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;}
#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;
- Ganti warna huruf menu > color:#222;
4. Cari/Temukan (CTRL+F) kode <body>
Catatan: jika tidak ada kode tersebut, cari kode <body>, <body .... > atau
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/> dan Copas kode berikut ini di atas-nya.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://www.f4nime.tk/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://www.f4nime.tk/' title='Contact'>Contact</a></li>
<li><a href='http://www.fanime.tk/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://www.fanime.tk/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://www.f4nime.tk/' title='Facebook'>Facebook</a></li>
<li><a href='http://www.f4nime.tk/' title='Twitter'>Twitter</a></li>
<li><a href='http://www.f4nime.tk/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://www.f4nime.tk/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://www.f4nime.tk/' title='Contact'>Contact</a></li>
<li><a href='http://www.fanime.tk/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://www.fanime.tk/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://www.f4nime.tk/' title='Facebook'>Facebook</a></li>
<li><a href='http://www.f4nime.tk/' title='Twitter'>Twitter</a></li>
<li><a href='http://www.f4nime.tk/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
NB: Ganti link http://www.f4nime.tk dan nama menu-nya dengan versi Anda.
6. Save Template!
Cara Membuat Navigasi Menu di Atas Header Blog sudah diujicoba dan BERHASIL
makasih banyak buat infonya...
BalasHapushttp://goo.gl/hk3dgS
sama sama
Hapusterimakasih atas informasinya
BalasHapushttp://jellygamatgoldg31.com/
Kereen sob artikelnya :)
BalasHapushttp://goo.gl/NIzJI3
ok makasih . jika berkenan add fb ane @kriesna4u untuk info lebih lanjud :)
Hapus