Cara Membuat Navigasi Menu di Atas Header Blog
April 04, 2020
Add Comment
Nah pelu di ingat untuk mencoba atau bagi yang baru belajar alangkah baiknya melakukan back up dengan mendownload html terlebih dahulu agar nantinya jika belum berhasil bisa mengulang kembali tanpa ragu template jadi eror.
Cara Lengkap Membuat Navigasi Menu di Atas Header Blog
Langkahnya membuat top navigasi menu :
Pertama masuk blog sobat dan pilih > template Template > Edit HTML
/*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;
* Cari/Temukan (CTRL+F) kode </head> atau <body>
Simpan kode berikut ini DI BAWAH-nya.
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://domain anda.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://domain anda.com/' title='Contact'>Contact</a></li>
<li><a href='http://domain anda.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://domain anda.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://domain anda.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://domain anda.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://domain anda.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://domain anda.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://domain anda.com/' title='Contact'>Contact</a></li>
<li><a href='http://domain anda.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://domain anda.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://domain anda.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://domain anda.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://domain anda.com/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
NB: domain anda.com bisa sobat Ganti link dan menu milik sobat.
Save Template!
Demikian info yang bisa saya uraikan semogga bermanfaat. Jika ada yang perlu di tanyakan silahkan bisa lewat komentar. matur suwon.
0 Response to "Cara Membuat Navigasi Menu di Atas Header Blog"
Post a Comment