Cara Membuat Navbar Header Blogger :
Untuk apasih tujuan navigasi menu/navbar header 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
/*MailianBlogger Navbar Header Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 600px;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:600px) dengan lebar header template Anda.
- Jika mau ganti background > background:#eeeded;
- 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://mailianblogger.blogspot.co.id/' title='Top Menu'>About</a></li>
<li><a href='http://mailianblogger.blogspot.co.id/' title='Contact'>Contact</a></li>
<li><a href='http://mailianblogger.blogspot.co.id/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://mailianblogger.blogspot.co.id/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://mailianblogger.blogspot.co.id/' title='Facebook'>Facebook</a></li>
<li><a href='http://mailianblogger.blogspot.co.id/' title='Twitter'>Twitter</a></li>
<li><a href='http://mailianblogger.blogspot.co.id/' title='Google Plus'>Google+</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
NB: Ganti link http://mailianblogger.blogspot.co.id/ dan nama menu-nya dengan versi Anda.
6. Save Template!
Cara Membuat Navbar Header Blogger sudah teruji BERHASIL dan 100% SEO Blogger .
Demikian Cara Membuat Navbar Header Blogger. Semoga tutorial dari saya bermanfaat buat teman - teman semua.
Jangan lupa bagikan/share tutorial ini kepada yang lain melalui SOSIAL MEDIA dibawah ini.
0 komentar
EmoticonEmoticon