Home » , » Cara Membuat Navigasi Menu di Atas Header Blog

Cara Membuat Navigasi Menu di Atas Header Blog

Cara Membuat Navigasi Menu di Atas Header Blog - Tujuan dari artikel berikut agar Blog yang kita kelola bisa kelihatan lebih profesional serta lebih menarik lagi.jadi untuk membuat menu navigasi diatas haeder blog sobat bisa di terapkan cara berikut ini.



Langkahnya membuat top navigasi menu:  
  • Pertama masuk blog sobat dan pilih > template
  •  Template > Edit HTML 
  • Cari/Temukan (CTRL+F) kode <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin>  
  • 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;}

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>

NB: domain anda.com bisa sobat Ganti link dan menu milik sobat.

  •  Save Template!

Demikian info yang bisa say uraikan semogga bermanfaat..matur suwon.
Share this article :

0 komentar:

Posting Komentar

Popular Posts

Diberdayakan oleh Blogger.
 
Support : Copyright © 2018. wonkbejho.web.id - All Rights Reserved
Template Created by Creating Website Published by Mas Template