Membuat menu horizontal dengan efek Light adalah menu dengan efek background gradient yang kelihatan light atau bercahaya bentuknya persis seperti gambar di bawah ini.
Nah mari langsung praktek :
1. Login Ke Blogger Kalian
2. Pilih Rancangan
3. Pilih Edit HTML
4. Simpan kode di bawah ini diatas kode
]]></b:skin>#nav {
width:100%;
margin-left:-40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUH26kumrUQy4CK6Fr55yY2_d6W9o_OChFc720xibn91aEeFv7m3DPS-W_X9P8Y1tIBHkmw_1dcMNmW8QG6rDPaX5cQTM4KanqUc1w7IfRLOGiDgkQJtiJXXQ5RjTdqhmcKEsmkGjqlLqt/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ZR7lkl75WnINVdxibKiW8v5RLNO4B4XJ_gCZjE7kFbyZWBaAVlqmGnrQ_SzAQ8fsXWe2t3NMb4wFFyZe1RGp5sAn8342EqnaZL5b_7yAph2olidSy-u-h6xMpXTbOk2PQp2vs8BN5y8/s1600/navi-bg.jpg) no-repeat top right;
color:#ffffff;
}
#nav li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ZR7lkl75WnINVdxibKiW8v5RLNO4B4XJ_gCZjE7kFbyZWBaAVlqmGnrQ_SzAQ8fsXWe2t3NMb4wFFyZe1RGp5sAn8342EqnaZL5b_7yAph2olidSy-u-h6xMpXTbOk2PQp2vs8BN5y8/s1600/navi-bg.jpg) no-repeat right -40px;
color:#ffffff;
text-decoration:none;
}
ul#nav li.activee a, ul#nav li.current-cat a {
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ZR7lkl75WnINVdxibKiW8v5RLNO4B4XJ_gCZjE7kFbyZWBaAVlqmGnrQ_SzAQ8fsXWe2t3NMb4wFFyZe1RGp5sAn8342EqnaZL5b_7yAph2olidSy-u-h6xMpXTbOk2PQp2vs8BN5y8/s1600/navi-bg.jpg) no-repeat right -80px;
}
#nav li ul {
display: none;
}Lalu cari kode seperti ini di template anda.
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Disini nama blog anda (Header)' type='Header'/> </b:section> </div>
Setelah ketemu silahkan tambahkan kode di bawah ini di bawah kode di atas
<ul id='nav'> <li class='activee'><a href='/'>Home</a></li> <li><a href='#' title='MENU 1'>JUDUL LINK ANDA</a></li> <li><a href='#' title='MENU 2'>JUDUL LINK ANDA</a></li> <li><a href='#' title='MENU 3'>JUDUL LINK ANDA</a></li> <li><a href='#' title='MENU 4'>JUDUL LINK ANDA</a></li> <li><a href='#' title='MENU 5'>JUDUL LINK ANDA</a></li> <li><a href='#' title='MENU 6'>JUDUL LINK ANDA</a></li> </ul>
Jangan lupa ganti tanda
# dengan URL anda dan ganti juga judul link nya.
