Cara Membuat Menu Navigasi Beserta SubMenu

Setelah kemarin mencoba mengutak-atik template khususnya didaerah navigasinya, ternyata berhasil juga dan disini akan saya share kembali Cara Membuat Menu Navigasi Beserta SubMenu ini yang saya dapat dari blog mas doyok. Semoga bermanfaat dan membantu anda yang lagi belajar mengutak-atik blog seperti saya.
Menu Navigasi ataupun SubMenu ini sangat bermanfaat sekali buat blog anda karena pengunjung akan mudah sekali mengakses semua informasi yang mereka perlukan dari blog anda. Dengan kemudahan2 yang diberikan anda tersebut blog anda akan banyak yang menyukainya apalagi dibarengi dengan konten yang selalu fresh dan menarik.

Berikut tutorial untuk membuat Cara Membuat Menu Navigasi Beserta SubMenu:

• Login ke Blogger.com
• Kemudian Tata Letak
• Pilih Edit HTML
• Centang Expand Widget
• Copas kode berikut dan paste di atas kode ]]></b:skin>

/* Navigasi Menu */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:#81BEF7; /* Warna latar belakang menu navigasi */
float:left;
}
#navmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#navmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#navmenu ul li {
float: left;
display:inline;
}
#navmenu li a, #navmenu li a:link, #navmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:9px 10px 9px 10px;
font-size:12px; /* Ukuran teks */
}
#navmenu li a:hover{
background:#5858FA; /* Warna latar saat kursor mouse berada di atasnya undefinedhover) */
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}
/* Sub Navigasi Menu */
#subnavmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu subnavigasi. Sesuaikan dengan lebar blog anda */
background:#5858FA; /* Warna latar belakang menu navigasi */
float:left;
}
#subnavmenu ul {
padding: 0;
margin:0;
float: left;
list-style: none;
}
#subnavmenu li {
padding:0;
list-style: none;
padding: 0;
margin:0;
}
#subnavmenu ul li {
float: left;
display:inline;
}
#subnavmenu li a, #subnavmenu li a:link, #subnavmenu li a:visited {
color:#000000; /* Warna teks */
font-family: Verdana; /* Jenis font */
text-decoration:none;
margin:0;
display:block;
padding:5px 5px 5px 5px;
font-size:10px; /* Ukuran teks */
}
#subnavmenu li a:hover {
text-decoration:underline;
}

• Silahkan anda modifikasi sendiri ukuran dan warnanya.
• Setelah itu, Cari kode yang seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='undefinedJudul Blog Anda) undefinedHeader)' type='Header'/>
</b:section>
</div>

• Setiap template memiliki kode yang berbeda, jadi cari kode yang mirip dengan diatas.
• Kalau sudah ketemu, Copas kode berikut dibawah kode diatas.

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='/'>Home</a></li>
<li><a href='http://namabloganda.blogspot.com/link-menu-pertama-anda.html'>Menu Pertama</a></li>
<li><a href='http://namabloganda.blogspot.com/link-menu-kedua-anda.html'>Menu Kedua</a></li>
<li><a href='http://namabloganda.blogspot.com/link-menu-ketiga-anda'>Menu Ketiga</a></li>
</ul>
</div>
<div id='subnavmenu'>
<ul id='subnavmenu'>
<li><a href='http://twitter.com/elraziq'>Follow me on Twitter</a></li>
<li><a href='http://facebook.com/elraziq'>Add me on Facebook</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com/p/about.html'>About Me</a></li>
<li><a href='http://rasiqzonetwork.blogspot.com/p/contact.html'>Contact Me</a></li>
<li><a href='http://namabloganda.blogspot.com/link-archives-anda.html'>Archieves</a></li>
<li><a href='http://namabloganda.blogspot.com/link-monetize-blog-anda.html'>Monetise Blog</a></li>
<li><a href='http://namabloganda.blogspot.com/link-get-free-news-anda.html'>Get Free News</a></li>
</ul>
</div>

• Silahkan ganti kode berwarna merah dan link lainnya dengan link anda
• Selanjutnya Save Template

Semoga bermanfaat dan membantu anda.. :D

UPDATE!!!
karena banyaknya visitor halaman ini dan banyak juga yang mengalami kesulitan maka disini saya mencoba update dan sekaligus sebagai jawaban atas pertanyaan yang dikotak komentar..

Question: Gimana cara isi kode link-nya biar menuju ke halaman yang kita inginkan bukannya ke Homepage?
Answer: Diatas sebenarnya sudah ada kodenya, cuma disana saya buat ke Homepage. Nah trus gimana caranya biar ngelink ke halaman yang kita inginkan, ok disini saya berikan contoh, misalnya saya mau link-nya menuju ke halaman ini yaitu tentang Cara Membuat Menu Navigasi Beserta SubMenu. jadi kodenya bukan seperti ini lagi <a href="http://rasiqzonetwork.blogspot.com"> rasiqzonetwork</a> tetapi akan jadi seperti ini <a href="http://rasiqzonetwork.blogspot.com/2010/06/cara-membuat-menu-navigasi-beserta.html">Cara Membuat Menu Navigasi beserta SubMenu</a>. Bagaimana? bisa dicerna? jadi link-nya bukan lagi ke Homepage tapi ke link halaman yang kita inginkan.. Jadi cuma ganti link-nya aja.. semoga bisa dimengerti, kalo masih kesulitan silahkan kontak saya via email (rasiq.zone@gmail.com) biar saya bantu langsung.

Untuk menambahkan menu: silahkan letakkan kode menu tambahan anda diantara kode berikut:

<ul>

</u>

jadi nanti akan seperti berikut:

<ul>
<li><a href="http://namabloganda.blogspot.com">Nama Menu Anda</a></li>
</u>

semoga bisa membantu..

Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.