1. Đăng nhập vào tài khoản Blogger.
2. Vào phần thiết kế (Design).
3. Chọn Phần tử trang.
4. Chọn Thêm tiện ích (Add Widgrt) - thêm 1 tiện ích HTML/Javarscrip.
5. Dán đoạn code bên dưới vào:
<div id="menulaber"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link 5</a></li> </ul> </div>
6. Lưu tiện ích lại.
7. Tiếp theo các bạn định dạng CSS cho các menu của các bạn bằng cách:
Chọn Thiết Kế
Chọn Chỉnh sử HTML
Dưới đây là 25 mẫu nếu thích mẫu nào thì các bạn Copy đoạn CSS đó và dán vào trước thẻ ]]></b:skin>
Mẫu 1:
CSS
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNNhEJvQBNMu4QReQPBSGXEzdQFoI9h_D84zWLbjhxGPIY08_sHf39AsnnHkR-DwQBvP1gHDMhxBezrBxZ21-5TJ8rgg_0gh6VG4CtLbpXd8-nT0YMzztogYwEBwE5W02h45-vTDgo2x5/s1600/menu1-namkna-blogspot-com.gif); padding: 8px 0 0 35px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNNhEJvQBNMu4QReQPBSGXEzdQFoI9h_D84zWLbjhxGPIY08_sHf39AsnnHkR-DwQBvP1gHDMhxBezrBxZ21-5TJ8rgg_0gh6VG4CtLbpXd8-nT0YMzztogYwEBwE5W02h45-vTDgo2x5/s1600/menu1-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 35px; }
Mẫu 2:
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd3f3K-vvj2aWkYhijh-RWPEwPQffe8hNJ6HS4qftmFPVel7rkHUx_pJbKWDfKGqtFY-z-dUXs74YZO6YhVJ5oQAcWubgXapGTAOSDd4Vdz5zOb6QbGjJQazGAEQD-f3phTLeLm_pJd3NR/s320/menu2-namkna-blogspot-com.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current, #menulaber li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd3f3K-vvj2aWkYhijh-RWPEwPQffe8hNJ6HS4qftmFPVel7rkHUx_pJbKWDfKGqtFY-z-dUXs74YZO6YhVJ5oQAcWubgXapGTAOSDd4Vdz5zOb6QbGjJQazGAEQD-f3phTLeLm_pJd3NR/s320/menu2-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }
Mẫu 3: 
CSS
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi35qe-wQMYtuCU6ekqxRLV1vkOIykif_vflCX_GH71ft1oy803o3PvbkwAK1CfJ6Zt9tQ2-9CJolKz94IrdAb5mlX9nsHYfCYi5CG1h4Wh9ME851kCHj77RB6WYJ6g1Y41HMe80vM0ONQJ/s320/menu3-namkna-blogspot-com.gif); padding: 8px 0 0 20px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi35qe-wQMYtuCU6ekqxRLV1vkOIykif_vflCX_GH71ft1oy803o3PvbkwAK1CfJ6Zt9tQ2-9CJolKz94IrdAb5mlX9nsHYfCYi5CG1h4Wh9ME851kCHj77RB6WYJ6g1Y41HMe80vM0ONQJ/s320/menu3-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 20px; }
Mẫu 4: 
CSS
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; border: 1px solid #ccc; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVp4kZ82S4L4r85Qw7nrFZB7JexhsIg3ExKD6vgZ1EprAcInGgqmCFsrY9IIJTsI8zhmytUgcRYYVqQHrIQ2IDCK7SOB_pgxSyZr3WYZsV7lCAlznZEkirLccjDtDPPryPYlgJdPCWkM9/s320/menu4-namkna-blogspot-com.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover, #menulaber li #current, #menulaber li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgVp4kZ82S4L4r85Qw7nrFZB7JexhsIg3ExKD6vgZ1EprAcInGgqmCFsrY9IIJTsI8zhmytUgcRYYVqQHrIQ2IDCK7SOB_pgxSyZr3WYZsV7lCAlznZEkirLccjDtDPPryPYlgJdPCWkM9/s320/menu4-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 30px; }
Mẫu 5: 
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNhKNJCmO-on9yGSMmaKrB9wsk1UbUuQE1r3f7GYHDDJ4cp3sJuZ5LHXDh7yIplW3krejtxgrMrFXRozOLFVt1Yu64RTwpn1hHZ8mzaqk1_8Vr5ey17ek_-83ZhTmB4_77cXwwGorpPBz/s320/menu5-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNhKNJCmO-on9yGSMmaKrB9wsk1UbUuQE1r3f7GYHDDJ4cp3sJuZ5LHXDh7yIplW3krejtxgrMrFXRozOLFVt1Yu64RTwpn1hHZ8mzaqk1_8Vr5ey17ek_-83ZhTmB4_77cXwwGorpPBz/s320/menu5-namkna-blogspot-com.gif); padding: 8px 0 0 10px; }
Mẫu 6: CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsy_1729QVkL1JPtMRR3xNaezClm98pcWbYpfCqudusVsreCo1LZF5MkTTR65g5iV6NCRsBmz5U2Y69Mf316TlaIVBiD8rkNX0MO1sTqzG9boiNdceRX1pn-Dhq6nEieehTZdRchbUEZ4R/s1600/menu6-namkna-blogspot-com.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsy_1729QVkL1JPtMRR3xNaezClm98pcWbYpfCqudusVsreCo1LZF5MkTTR65g5iV6NCRsBmz5U2Y69Mf316TlaIVBiD8rkNX0MO1sTqzG9boiNdceRX1pn-Dhq6nEieehTZdRchbUEZ4R/s1600/menu6-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 30px; }
Mẫu 7: CSS
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgWX-YkthnzE50jus3FeSF1W-XVO9vwE9fFTvFG_hlRgvjcc6Lmx-qVseR_25yz6W2DM9M4VHYj4TdUphjvCilZr48gcb-Qi0P5ruyOnf1tUG0xNJID1ycIVRp4CVm0llOgPXxpNIf42I/s320/menu7-namkna-blogspot-com.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgWX-YkthnzE50jus3FeSF1W-XVO9vwE9fFTvFG_hlRgvjcc6Lmx-qVseR_25yz6W2DM9M4VHYj4TdUphjvCilZr48gcb-Qi0P5ruyOnf1tUG0xNJID1ycIVRp4CVm0llOgPXxpNIf42I/s320/menu7-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgWX-YkthnzE50jus3FeSF1W-XVO9vwE9fFTvFG_hlRgvjcc6Lmx-qVseR_25yz6W2DM9M4VHYj4TdUphjvCilZr48gcb-Qi0P5ruyOnf1tUG0xNJID1ycIVRp4CVm0llOgPXxpNIf42I/s320/menu7-namkna-blogspot-com.gif) 0 -64px; padding: 8px 0 0 10px; }
Mẫu 8: CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin-top: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVhhMG3_6Kt_Wx-ZrSVc5KcBsCZ4inGO7VllXV52Lr961yRRavoQv3FrH1nFAWpfg_kpvqxIQWuyFpRHM-g-GwHDQFZJHhq4e0JuCd72957fovvUbAgwfMMOLi2tca7QWHvn6eoONACQp/s320/menu8-namkna-blogspot.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVhhMG3_6Kt_Wx-ZrSVc5KcBsCZ4inGO7VllXV52Lr961yRRavoQv3FrH1nFAWpfg_kpvqxIQWuyFpRHM-g-GwHDQFZJHhq4e0JuCd72957fovvUbAgwfMMOLi2tca7QWHvn6eoONACQp/s320/menu8-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVhhMG3_6Kt_Wx-ZrSVc5KcBsCZ4inGO7VllXV52Lr961yRRavoQv3FrH1nFAWpfg_kpvqxIQWuyFpRHM-g-GwHDQFZJHhq4e0JuCd72957fovvUbAgwfMMOLi2tca7QWHvn6eoONACQp/s320/menu8-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 10px; }
Mẫu 9: CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DytuQisNnV13wYNQfW-zt1KldJ2ZdzsoScLT1yIqUdn1KMImBXxz8yeHbbSumN0wCK8kIlZgO0VAsgU2J33kd1P8tKRMlRuctxnHpEmurMKNgoRKBW3t82E3b-Yuf5RG_yTEYIFRCRcr/s320/menu9-namkna-blogspot.gif); padding: 10px 0 0 35px; }
#menulaber li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DytuQisNnV13wYNQfW-zt1KldJ2ZdzsoScLT1yIqUdn1KMImBXxz8yeHbbSumN0wCK8kIlZgO0VAsgU2J33kd1P8tKRMlRuctxnHpEmurMKNgoRKBW3t82E3b-Yuf5RG_yTEYIFRCRcr/s320/menu9-namkna-blogspot.gif) 0 -32px; padding: 10px 0 0 35px; }
Mẫu 10: CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZ1UHpVxSYvYQ2OR5A92pJ3m-Eg2bUAMtNmnX_GbgXEl8NQ-h46Xp7IrHW1BChPkmfNst8cvzadI-fQJFh6l0ySmqcJxX04fl_EZLY6DnxOo1navDpnGdLHWdkyVir6FMWGcYPu44S1VU/s320/menu10-namkna-blogspot.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZ1UHpVxSYvYQ2OR5A92pJ3m-Eg2bUAMtNmnX_GbgXEl8NQ-h46Xp7IrHW1BChPkmfNst8cvzadI-fQJFh6l0ySmqcJxX04fl_EZLY6DnxOo1navDpnGdLHWdkyVir6FMWGcYPu44S1VU/s320/menu10-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 10px; }
Mẫu 11: CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-rxA1ufgAeGj4-NVc9OE99RgrQJqxfx32Fu-ooVuOt4dxgU5koUKLx1T4adNac04HDGygAl0x7a5LxJZXYBcfhMkQSgd4UFJEou8p5WKAjSit2ZyTsIKPr6IwVET2-1Kmz2RV-7OKlOy/s1600/menu11-namkna-blogspot.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover, #menulaber li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-rxA1ufgAeGj4-NVc9OE99RgrQJqxfx32Fu-ooVuOt4dxgU5koUKLx1T4adNac04HDGygAl0x7a5LxJZXYBcfhMkQSgd4UFJEou8p5WKAjSit2ZyTsIKPr6IwVET2-1Kmz2RV-7OKlOy/s1600/menu11-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 30px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-rxA1ufgAeGj4-NVc9OE99RgrQJqxfx32Fu-ooVuOt4dxgU5koUKLx1T4adNac04HDGygAl0x7a5LxJZXYBcfhMkQSgd4UFJEou8p5WKAjSit2ZyTsIKPr6IwVET2-1Kmz2RV-7OKlOy/s1600/menu11-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 30px; }
Mẫu 12: CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin-top: 10px; }
#menulaber li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; }
#menulaber li a:link, #menulaber li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMnm2W3eq16jorJo-ik1S8DTIlvESewHaYWjyRBoTfCg16ddkENxmmFEr0uUvInPFD5EwHoqSaI0vWNXiGrVAIu8-8GZo-z2ovWiLoB74yq8x6C-7gPijyfdyee22uhU_4aPbeohvxGUz/s1600/menu12-namkna-blogspot.gif); padding: 8px 0 0 20px; }
#menulaber li a:hover, #menulaber li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMnm2W3eq16jorJo-ik1S8DTIlvESewHaYWjyRBoTfCg16ddkENxmmFEr0uUvInPFD5EwHoqSaI0vWNXiGrVAIu8-8GZo-z2ovWiLoB74yq8x6C-7gPijyfdyee22uhU_4aPbeohvxGUz/s1600/menu12-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 25px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMnm2W3eq16jorJo-ik1S8DTIlvESewHaYWjyRBoTfCg16ddkENxmmFEr0uUvInPFD5EwHoqSaI0vWNXiGrVAIu8-8GZo-z2ovWiLoB74yq8x6C-7gPijyfdyee22uhU_4aPbeohvxGUz/s1600/menu12-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 25px; }
www.diaockhudong.com
