Membuat Menu Bar Horizontal pada Template Blog

Selamat Datang di Tips Trik Blogs, Blog yang isinya Tips Trik Blog | Free Blogger Widgets | Informasi Menarik Di Bidang Teknologi dan IT.
Tips Trik Blog kali ini akan membahas mengenai bagaimana cara Membuat Menu Bar Horizontal pada Template Blog.
Menu bar merupakan sebuah Menu horizontal yang terletak dibawah Header Blog dimana berisi mengenai Link-link yang saling berhubungan.
Jika sobat belum mengerti apa itu Menu Bar, sobat bisa lihat gambar dibawah ini.

Cara membuatnya:
pertama Login ke akun Blogger sobat
pada Menu Rancangan - Pilih Edit HTML
jangan lupa untuk mencentang Expand Widget Templates
Cari Kode Berikut: ]]></b:skin>
Setelah ketemu, masukkan kode berikut di atas kode  ]]></b:skin>

Klik Disini [klik buat liat kodenya] :

#NavbarMenu{background:#005094;border-top: 1px solid #3373a9;border-bottom: 1px solid #3373a9;width:968px;height:32px;color:#FFF;font:bold 8px Arial, Tahoma, Verdana;clear:both;margin:0 auto;padding:0}
#NavbarMenuleft{width:758px;float:left;margin:0;padding:0}#search{width:210px;font-size:11px;float:right;margin:0;padding:0}
#nav li{list-style:none;float:left;background:#005094;border-left:1px solid #3373a9;border-right:1px solid #003867;margin:0;padding:0}
#nav li a,#nav li a:link,#nav li a:visited{color:#fff;display:block;text-transform:capitalize;font:normal 12px Georgia, Times New Roman;margin:0;padding:10px 9px 6px}
#nav li a:hover,#nav li a:active{background:#1a4c76;color:#red;text-decoration:none;margin:0;}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:#005094;width:200px;color:#fff;text-transform:capitalize;float:none;border-bottom:1px solid #3373a9;border-top:1px solid #003867;font:normal 11px Georgia, Times New Roman;margin:0;padding:7px 10px}
#nav li li a:hover,#nav li li a:active{background:#1a4c76;color:#fff;padding:7px 10px}
#nav li a.enclose,#nav li a.enclose:visited{border-bottom: 1px solid #000;}#nav li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0}
#nav li ul a{width:140px}
#nav li ul ul{margin:-75px 0 0 171px}
#nav li:hover ul ul,#nav li:hover ul ul ul,#nav li.sfhover ul ul,#nav li.sfhover ul ul ul{left:-999em}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li.sfhover ul,#nav li li.sfhover ul,#nav li li li.sfhover ul{left:auto}
#nav li:hover,#nav li.sfhover{position:static}#searchform{overflow:hidden;display:inline;margin:0;padding:0}
#searchbox{background:#ddd;margin:0;padding:0}#search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}#search .btn{width:auto;border:0;margin:7px 0 0;padding:0}
#subnavbar{background:#004313;width:962px;height:24px;color:#FFF;margin:0;padding:0}
#subnav li a,#subnav li a:link,#subnav li a:visited{color:#f9fc01;display:block;font-size:11px;text-transform:capitalize;margin:0 5px 0 0;padding:3px 13px}
#subnav li a:hover,#subnav li a:active{color:#DCD900;display:block;text-decoration:none;margin:0 5px 0 0;padding:3px 13px}
#nav ul,#subnav ul,#subnav li{float:left;list-style:none;margin:0;padding:0}*,#nav,#subnav{margin:0;padding:0}

Nah, lanjut lagi gan clo dah selesai..

sekarang cari kode:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:section class='headerright' id='headerright' preferred='no'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>

clo bingung alias gak ketemu, sobat cari tag HTML bagian <div id='header-wrapper'> atau <div id='header
nah terus cari sampai ketemu tag HTML

</b:section>
</div>

Terus Masukkan kode berikut ini dibawah kode tadi.

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Home</a></li>
<li><a href='#'>News</a>
 <ul>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
 </ul></li>
<li><a href='#' title='edit'>Belajar Pemrograman</a>
 <ul>
  <li><a href='#'>edit</a></li>
  <li><a href='#'>edit</a></li>
 </ul></li>
<li><a href='#' title='edit'>Tips N Trik</a></li>
<li><a href='#'>Download Center</a></li>
</ul></div>
</div>

Ganti kata-katanya kalau udah tinggal di Save

Diposting oleh LKP AL-QOLAM |