Sabtu, 20 Februari 2010

cara membuat submenu di blog

. Sabtu, 20 Februari 2010

Assalamualaikum, sob...

Setelah ngecek postingan saya di sini, saya menemukan komentar masuk. Seperti ini nih komentarnya.

"kalau untuk membuat navigasi menu horizontalnya menjadi 2 (dua) tingkat, bagaimana caranya mas?"

Untuk menampilkan menu seperti itu, gampang caranya.

1. Login dulu ke Blogger, lalu pilih menu Tata Letak > Edit HTML.

2. Backup dulu template anda.

3. Cari kode:
]]>
4. Tepat diatasnya, ketikkan 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 (hover) */
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;
}
5. Lalu cari kode yang mirip/mendekati:





6. Lalu dibawahnya, ketikkan kode:


Jangan lupa, Ganti link diatas dengan link yang anda inginkan. Anda bisa menambah ataupun mengurangi jumlah link dari menu tersebut.

7. Kalau masih ragu-ragu, sebaiknya Klik Pratinjau.

8. Kalau sudah yakin, Klik Simpan Template.

Nah, sudah kejawab kan?

Semoga bermanfaat.

 
Namablogkamu is proudly powered by Blogger.com | Template by lemek | The Blog Full of Games