Navigasi Menu Cantik

CANTIK? Eh, jangan seneng dulu! Cantik itu kan relatif. Hehehe... Saya mau bagi tips lagi neh... Sebenernya sama aja kayak navigasi menu, tapi yang ini dengan background, sehingga mempercantik tampilannya. Nah, contohnya seperti gambar diatas (klik gambar untuk lebih jelas). Nah, kalau tertarik, ikuti langkah berikut.

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

2. Backup template anda.

3. Cari kode:

]]></b:skin>

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/AVvXsEguLwKziatHXpf44-mHF2hOj0hcNhbkXLGnHHgeFnGG3NejVmeUoiDbk7MUwpwXdi1Xo91b2Bd7Q-6_cXngccd9i9uripCWIcTIoCnpTzCDJCx8QYXzrWpmgFbKCymvhLW8nts3H0AA5_8/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/AVvXsEikEPu0walWdF7LZLvrvVv8ml1VQpWWi_PPXH2a9SfDzjjwV-uuI8aCEkVm4lOJ53D-Ig_kx_s3sciqzZSZVYIrQ9dd-FDGI0zULmeAGOA2NN6DDHk14T5qL-Mp45G1JeI6YpoQ8rvKEjY/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/AVvXsEiiNhIurdwk05Uh3zEhOcLfINrqlzrqUX7roV3rToQtQjjwswrM5oEWXbt9wcFJR3pTFUY3JqgDYhzQzq6kp4NRTFMjV5PPSy0zbXEdS-uNGWYZlwKtvTsIVhDvPKYgGxP4e8Fa7JSbkrs/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/AVvXsEiSXTo-p5AsijF5cHBqUykgr1NjErW38jJtovubTrKM1qp4owEnBUkyxVDTKKCcfSbw-7xzeONfk9PptAiu2z2Oo14fbhyphenhyphenrKP7lQt6R0bDt7fVV__7nIrWHTdTCpAoh3H_ePCAWGY2ynM8/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/AVvXsEgJsKUCwCnx8q1XhCj9Wm2c23epjrSornXksAyL0eqqJkNOWHT45dpNQMygLxo76O7EoKmOKiBh-9xeHCmSZtWYxWgoekNOYra7EtouokNneLCtrL8vdtFPtGogdVXx1v9TZrkjqH2loFo/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/AVvXsEivSZ1GhAW8JK0q05Vv8x5pMLgv6luS5Qz3soB3_GKMvftqUMt7PUpO1uEWefFW4qHFx6uyTSujKK-PvBgJGf5kGm6CrMkpNV5ZcpQonyB4f5Y7CblIXclRLtr7xqN_QJb4gOI4ReaXPX4/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/AVvXsEj4w2s_58KNiOLCJd6JLKoWw6uevjxv96AXgur9mzk4VxMwa8S-HF_YgfRs4Ta35aMP3umX2WoKo3941-KCIS2QUDtCl7tZeflDTSZnYzMphHLyiRe8ZRyeLDXFACivOKUj9FKHblWVDEI/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/AVvXsEht7QcxCwy5Zwgi8x_WrY_1ZbIEFCHaU27aBytnsW4HhYglTf-RWlJ-J4t8dlhLmQZkWygGbcnEJOyuR5nneMz9IUCpSzicnclWKIeOQoFHBNam2i-IbVB5kS9S3cp2HtrKvCWHsWP_T4s/s320/Navbgblackhover.jpg);
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

5. Cari kode yang mirip:

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

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

<div id='navmenu'>
<ul id='navmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
</ul>
</div>

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.

Selamat mencoba dan semoga berhasil.