Navigasi Menu Cantik

ikuti langkah berikut.

1. Login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup template anda.

3. Cari kode:

]]>

4. Lalu masukkan kode berikut diatasnya:


a. Untuk yang hijau:

/* Navigasi menu hijau */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJXbkMmpQK7vFDjbjC6Rxb7qzI4asZ06E9raqIRlyJAt4iFrzljEq9MfDXhfePi1s-SLt77l24Z40w7ZUuCFsk7HzbaGPPFuuRrgYpKaPqcrs_qMVtAevLT5Cteo7q-zbliUC2n58HU0/s320/Navbg.jpg);
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZY_zgnsJmP47I_zFywli8LTo9PtxCkFVU6tZ7yxbDj-VduUX2WqecWstWQdLQgTpNimJe9PklurMZwcUN7iaP-qw9ni_w1Q2hr4bDs_SgMxevVdf2YNJANCVREncIc5BeJTPhc5RhdZg/s320/Navhoverbg.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

b. Untuk yang biru:

/* Navigasi menu biru */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRrH6fAdzPFsYWgz-HBwxIzwQYAwm3wlQTxMuP91eI4g_CVN4anb66f8QYQl1FJo58NMw0sr8D0xv9Ar_04oQIXptL2eLJFvw4FUxtFak2uVVRO32FJCV4WWrXufhKvrUPMBtYwQVQrY/s320/Navbgblue.jpg);
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwmowcgNmDlT-vr87G6b0vHnl-FzFEiTv3hfCjaqKYEJfnkU08AbMN08haH9r9tVS9FpG7csDybvBvn6B9bj-S91Zh5prH40kcbDVKPNZurnMWWNNVbJWSuoQ7BU2KwUksSTFlMsk9ZI4/s320/Navbgbluehover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

c. Untuk yang berwarna kuning:

/* Navigasi menu kuning */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRd9s9WbkjXcd2Z4S_oetX6SInSh950oRHgBcqLTE_VX2NWj5YKOmo4Br0ez0_gRZu1VnLjK8IzM0Pm8hxOuezA0kmhWGLg3CG5DD0pOFsRbQp7251tHGWGPIM5zDZTRml1L7zEQ8vH1I/s320/Navbgyellow.jpg);
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZO93SJRxQf7VULi0cFfMeV6L-7_GxisrnDB647sqtpz84gV-USG1Wj27QucwIY6BPvEHPPPmUzUfJBZcrfWRs7-xvEerVIsn3qruaaNQVO1fW57PlTwzi6rb1VgnQAzyMWZOx-S4j6fM/s320/Navbgyellowhover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

d. Untuk yang hitam:

/* navigasi menu hitam */
#navmenu {
height:auto;
margin:0;
width:100%; /* Lebar dari menu navigasi. Sesuaikan dengan lebar blog anda */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8cqtCSuz1FT3AMx7nvVkbAdyvN8NjSkomCIyb4jnlFiKc01V58gmZmTMwvLzrFNHPQkw_bK7IArAmkFQlkHrvT03ZdDakJqxa7eX7yTwHKSFbX7vQA4TASiYQDCpSgojjbfM1b0PamAQ/s320/Navbgblack.jpg);
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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMKJhV4Rt2fSzgcoHQaO_CW5KGms5rNhwyn1QE8jp2vvrx9Osrd9RGgpD-cA9o0V7JHLnq_pxiNtbueFgdzdNGfRCvrEvoMFykDjTaa_KJrP6rJvelpMOHNYMbkdl3lRSUGTTleWsxnSM/s320/Navbgblackhover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

5. Cari kode yang mirip:

6. Masukkan kode berikut dibawahnya (untuk semua jenis).

• Home
• Menu 1
• Menu 2
• Menu 3
• Menu 4
• Menu 5

Ket: tanda pagar (#) adalah link. Ganti dengan URL yang diinginkan. Sedangkan yang berwarna biru adalah teks pada menu. Ganti juga dengan yang diinginkan.

7. Klik Simpan Template.

8. Coba lihat blog anda.