Home » » Menambah Menu Bar Di Bawah Header

Menambah Menu Bar Di Bawah Header

Pemasangan Widget Menu Bar dan Sub Menu Bar Di Bawah Judul Blog sangat penting untuk sebuah Blog. Karena memuat berbagai macam isi blog. Di sana akan di cantumkan Daftar Isi Blog yang biasanya diwakili oleh Nama Label sekaligus Sub Judul  dari Nama Label tersebut. Sehingga membuat para pengunjung yang membutuhkan informasi dapat memilih informasi yang dibutuhkan dengan melihat dari Menu Bar yang kita tempatkan.

Menu Bar

Bagaimana cara Pemasangan Widget Menu Bar dan Sub Menu Bar Di Bawah Judul Blog? Kita simak di bawah ini :

1. Pada Dasbor Blog bukat Templat.
2. Temukan Kode ]]><b:skin>, supaya mudah gunakan Ctrl+F
3. Copas kod skrips di bawah ini :


#navbarmenu{width:auto; float:left; font-size:12px; background:#fff; font-weight:bold; margin:0 auto; padding:0 auto}
#nav{margin:0; padding:0}
#nav ul{float:left; list-style:none; margin:0; padding:0}
#nav li{list-style:none; margin:0; padding:0; background:none}
#nav li a, #nav li a:link, #nav li a:visited{color:#000000; display:block; font-weight:normal; text-transform:normal; margin:0; padding:5px 15px 5px}
#nav li a:hover{background:#99FF00; color:#FFF; margin:0; -moz-border-radius:8px; padding:5px 15px 5px; text-decoration:none}
#nav li li a,
#nav li li a:link,
#nav li li a:visited{background:#FFF; -moz-border-radius:8px; width:150px; color:#00000; font-weight:normal; text-transform:normal; float:none; margin:0; padding:5px 10px 5px 15px; border-bottom:1px solid #fff; border-left:1px solid #fff; border-right:1px solid #fff}
#nav li li a:hover{background: #99ff00; color:#FFF; padding:5px 10px 5px 15px}
#nav li{float:left; padding:0} #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:-25px 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}

4. Paste kode diatas dan tempatkan tepat di atas kode ]]><b:skin>. Klik Simpan.
5. Buka Tata Letak. Pilih Tambahkan Widget yang tepat di bawah judul Blog.
6. Pilih HTML/JvaSript, copas skrip di bawah ini.

<div id='menu'>
<div id='menu-wrap'>
<div id='navbarmenu'>
<ul id='nav'>
<li><a href=‘#’>Judul Blog</a></li>
<li><a href=‘#’>Judul Blog</a></li>
<li><a href=‘#’>Judul Blog</a>
<ul>
<li><a href=‘#’>Sub Judul</a></li>
<li><a href=‘#’>Sub Judul</a></li>
<li><a href='#'>Sub Judul</a></li>
</ul>
</li>
<li><a href=‘#’>Judul Blog</a>

<ul>

<li><a href=‘#’>Sub Judul</a></li>

<li><a href=‘#’>Sub Judul</a></li>

<li><a href='#'>Sub Judul</a></li>

</ul>

</li>
<li><a href='#'>Judul Blog</a></li>
<li><a href='#'>Judul Blog</a></li>
</ul>

Keterangan Skrip :
Untuk yang di Blog Orange merupakan satu kesatuan dari Judul Blog dan Sub Blog. Tinggal Teman menambah atau mengurangi sesuai dengan kebutuhan yang ada.
'#'  ganti dengan Alamat URL 

7. Klik Simpan. 

Sampai tahap ini sudah selesai. Tinggal teman menempatkan Judul Blog dan Sub Judul Blog.

Seperti yang saya pakai merupakan Menu Bar yang sangat sederhana untuk mempersingkat loading blog. untuk merubah warna pada Menu silakan teman tukar sendiri dengan merubah background:#fff; sesuai apa yang diinginkan.

Semoga bermanfaat.

0 komentar:

Post a Comment

* Komentarlah yang sopan dan tidak mengandung sarah.
* Jangan gunakan Kotak Komentar dengan promosi produk serta usaha yang anda miliki. Silakan gunakan sarana Review Produk dan Jasa di blog ini. Maaf, akan dihapus.
* Terima kasih atas kunjungan, komentar dan partisipasi yang diberikan.

.