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
Langkahnya membuat top navigasi menu:
1. Template > Edit HTML
2. Cari/Temukan (CTRL+F) kode <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin>
3. Simpan kode berikut ini DI ATAS kode tersebut
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 <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin>
3. Simpan kode berikut ini DI ATAS kode tersebut
/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 950px;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: 950px;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 template Anda.
- Jika mau ganti background > background:#eeeded;
- Ganti warna huruf menu > color:#222;
4. Cari/Temukan (CTRL+F) kode </head> atau <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://sejarahbelajarku.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' 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://sejarahbelajarku.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://sejarahbelajarku.blogspot.com/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
NB: Ganti link dan menunya.
6. Save Template!
Tidak ada komentar:
Posting Komentar