Membuat Menu Navigasi Dengan Sub menu di Blogspot

Setelah Sekian lama menimba Ilmu Kesana kemari tenteng dunia blogging, sekarang saya sempatkan untuk share tentang membuat menu navigasi dengan sub menu ,,,

yuukk sama-sama kita belajar

Udah tahu kan menu navigasi ,kalau belum tahu seperi ini

Dengan adanya menu navigasi ini memudahkan pengunjung untuk menjelajahi isi blog kita..

langsung aja yuukk caranya seperti ini..
* Login Ke blog Deshboard
* klik rancangan
* Edit Html

cari kode ]]></b:skin> Untuk mempermudah pencarian tekan CTRL+F Setelah ketemu letakan kode dibawah ini tepat di atas kode  ]]></b:skin>

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #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; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #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: -32px 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; }

* Setelah itu simpan template 
* Sekarang giliran kita mengatur dimana letak menu navigasinya
* pilih Tab Rancangan - Elemen laman

* Add new widget/ tambah gadget dan pilih html javascript 
tambahkan kode berikut pada widget HTML/javascript

<div class='menuhorisontal'>
<ul id='nav'>

<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'></ul> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>

<li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
<ul>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
</ul> </li>
<li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
</ul>
</div>

Setelah itu simpan dan lihat hasilnya

Selamat mencoba ..
 

Artikel terkait Lainya Semoga membantu:

Posted in: belajar Blog