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 di atas kode ]]>
/* 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, untuk kode warna (Baca: Kode Warna HTML)
  • Setelah itu, Cari kode yang seperti ini:




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

Semoga bermanfaat dan membantu anda..
By :Muyassar