Menambahkan menu bar dan sub menu bar di halaman blog hanya agar tampilan terlihat lebih rapi, sehingga para pembaca lebih mudah mencari bentuk postingan yang diinginkan. Selain itu juga membantu kita dalam mencari hasil postingan untuk tujuan perbarui karena ada kesalahan pengetikan dan lain lain. Pengertian dan fungsi Menu Bar itu sendiri Klik disini
Langkah Pemasangannya sebagai berikut:
Pilih Template lalu pilih Edit HTML
Pilih/klik Lanjutkan
Pilih/klik Expand Template Widget, pilih salah satu saja Kemudian Cari scrift berikut :
Semoga Bermanfaat
Langkah Pemasangannya sebagai berikut:
Pilih Template lalu pilih Edit HTML
Pilih/klik Lanjutkan
Pilih/klik Expand Template Widget, pilih salah satu saja Kemudian Cari scrift berikut :
Copy Paste scrift dibawah ini, letakkan tepat diatas scrift
<style>
/* -- Menu
Horizontal + Sub Menu-- */
#cat-nav
{background:#F0F8FF;margin:0 15px;padding:0;height:35px;}
#cat-nav a {
color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-
right:1px solid
#156994;}
#cat-nav a:hover {
color:#fff; }
#cat-nav li:hover
{ background:#000; }
#cat-nav a span {
font-family:Verdana, Geneva, sans-serif; font-size:11px;
font-style:normal;
font-weight:400;
color:#fff; text-shadow:none;}
#cat-nav .nav-description
{ display:block; }
#cat-nav a:hover
span { color:#fff; }
#secnav, #secnav
ul { position:relative; z-index:100; margin:0; padding:0; list-style:none;
line-height:1;
background:#0d5e88; }
#secnav a {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-weight:700;
font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px;
text-decoration:none;}
#secnav li {
float:left; width: auto; height:35px;}
#secnav li
ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul
li { height:30px; border-top:1px solid #fff; }
#secnav li ul li
a { font-family:Verdana, Geneva, sans-serif; width:180px;
line-height:30px;
padding:0 10px;
font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul
ul { margin: -30px 0 0 180px; }
#secnav
li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav
li.sfhover ul ul ul
{ left:-999em; }
#secnav li:hover
ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul,
#secnav li
li.sfhover ul,
#secnav li li li.sfhover ul { left: auto; }
#secnav
li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav
{width:100%;margin:0 auto;}
</style>
<div
id='cat-nav'>
<ul class='fl'
id='secnav'>
<li><a
href='#'>Beranda</a></li>
<li><a
href='#'>Menu 1</a></li>
<li><a
href='#'>Menu 2</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu2 a</a></li>
<li><a
href='#'>Sub Menu2
b</a></li>
</ul>
</li>
<li><a
href='#'>Menu3</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu3a</a></li>
<li><a
href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a
href='#'>Menu4</a>
<ul
id='sub-custom-nav'>
<li><a
href='#'>Sub Menu4a</a></li>
<li><a
href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a
href='#'>Menu5</a></li>
</ul>
</div>
- Untuk memasukkan alamat URL: Ganti tanda # (warna merah) dengan link atau URL yang diinginkan. Bisa menggantinya dengan postingan atau label.
- Untuk menuliskan judul menu atau judul postingannya : Ganti tulisan warna merah dengan nama Menu dan nama sub menu yang diinginkan. Semoga bermanfaaat.
Semoga Bermanfaat
