tambah horizontal menu with shadow effect

menu ini mempunyai efek hover dan Shadow/bayangan yg telah dimasukan ke dalam kode CSS,dan menu ini akan kelihatan bercahaya dengan adanya Shadow di CSS nya apabila cursor menyentuh menu.. :)

1. Login Ke Blog
2. Pilih Design
3. Pilih Edit HTML
4. Simpan CSS Di bawah ini di atas code ]]></b:skin>

<style type='text/css'>
#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzv2h0E-WmPMS5v14yxGO5FNyUyG2FaMX4cS6wAmqVWauoGgJfwQPA5Jbxc5FMXDXkH7GCdPwcmeCOFxNoKDfZpqdE_QgAr19lfJLoDZFltCBxdor7HcFuvZayl-IsUXZTPtXKysNiS3u5/) repeat-x;
}

#nav li {
float: left;
display: block;
}

#nav li a {
float: left;
display: block;
padding: 12px 18px 12px 18px;
text-transform: uppercase;
text-decoration:none;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right;
color:#ffffff;
font-family:Tahoma;
text-shadow: 0 0 5px #000;
}

#nav li a:hover {
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat right -40px;
-moz-box-shadow: 1px 1px 55px #fff;
color:#ffffff;
font-family:Tahoma;
text-shadow: 0 0 5px #000;
text-decoration:none;
}

ul#nav li.activee a, ul#nav li.current-cat a {
color: #fff;
background: url(http://lh3.ggpht.com/_7ZIYPUkIUEw/TNWkoQFUrEI/AAAAAAAAAFA/3RlsV_UOXlo/navi-bg.jpg) no-repeat top right;
}

#nav li ul {
display: none;
}
</style>

 click save..

tapi belum habis lagii..

sekarang kena la pegi Page Elements > Add Gadgets > HTML Javascript

then , copy and paste codekat bawah nii ~

<ul id='nav'>
<li class='activee'><a href='URL BLOG ANDA'>Home</a></li>
<li><a href='URL LINK' title='short description'>MENU 1</a></li>
<li><a href='URL LINK' title='short description'>MENU 2</a></li>
<li><a href='URL LINK' title='short description'>MENU 3</a></li>
<li><a href='URL LINK' title='short description'>MENU 4</a></li>
<li><a href='URL LINK' title='short description'>MENU 5</a></li>
</ul>

aaa..
Text kaler hitam kena tukar ngan Page URL , text kaler merah kena tukar ngan url blog..text purple kena tukar ngan tajuk page yang nak pegi tu..

nampak tak text 'short description'?? tu korang letak la apa-apa ayat yang korang suka ok :D

semoga berguna! :D