Bikin Menu navigasi Di Blog

Masih tentang utak atik template standar Blogger. Sebelumnya saya sudah menambahkan catatan tentang cara menambah elemen di Header (judul), Main (postingan) dan crosscol (dibawah header). Sekarang saya ingin menambahkan menu navigasi di template saya ini.

Jika ada yang tertarik dengan menu navigasi seperti yang diatas silahkan juga diikuti. Kode dibawah ini telah saya gunakan di template ini. Jadi untuk permulaan saja tolong semua kode yang berwarna merah disesuaikan dengan template yang akan digunakan.

1. Login Blogger > Tata Lelak > Edit HTML
2. Centang Expand Template Widget
3. Cari Kode: ]]>
4. Copas kode di bawah persis diatas kode ]]>


/* navigation
----------------------------------------------- */
#bg_nav {
background: #000000;
width: 760px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
/* Akhir nav_bar------------------------------------- */

5. Cari kode dibawah yang atau yang mirip dengannya :

6. copas kode ini dibawah kode yang diatas:













• Kerjointernet.blogspot.com'>Home


• Kerjointernet.blogspot.com'>About


• Kerjointernet.blogspot.com'>Contact Us













8. Klik tombol pratinjau guna melihat apakah ada kesalahan dalam penulisan kode.
9. Jika sudah benar, simpan.

Sumber Kang Rohman.