TẠO MENU DỌC CHO NHÃN

Mặc định các nhãn của Blogspot được hiển thị rất đơn điệu, nếu bạn muốn các nhãn hiển thị được đẹp hơn, bạn có thể tạo menu dọc cho nó, để tạo menu dọc các bạn phải dán code vào mã nguồn và một vào HTML/Javacrip.

Các bước như sau:

Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > Chỉnh sửa HTML, bấm đồng thời 2 phím Ctrl+F để mở hộp tìm kiếm, gõ vào khung lệnh ]]></b:skin>, sau đó dán code trong khung màu xanh vào phía trên nó và lưu lại. Tiếp theo bạn vào Thiết kế > Thêm tiện ích > Thêm HTML/Javacript và dán code trong khung màu tím vào, thay đổi các đường link của nhãn, viết tên hiển thị của nhãn, cuối cùng lưu lại là xong (Bạn có thể xem thêm chỉ dẫn chi tiết cách thức dán các code TẠI ĐÂY)

 

Mẫu 1:

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 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; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr-ova24yznst1H9Vu2JwgcA1mJsiLtv1lgDN4ZMc_X0v8nFyX1LlP8fLfL5WRMizTzLOfJyMao4iqFpCdRA5jJ4rTHnZ_pbT2sa0qww7DiwztHg1YJMm_8nYGRozdb801lQv47N7Vrwo/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr-ova24yznst1H9Vu2JwgcA1mJsiLtv1lgDN4ZMc_X0v8nFyX1LlP8fLfL5WRMizTzLOfJyMao4iqFpCdRA5jJ4rTHnZ_pbT2sa0qww7DiwztHg1YJMm_8nYGRozdb801lQv47N7Vrwo/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

Dán vào HTML/Javacript
<div id="menu9"><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">Link5</a></li> </ul></div>


Mẫu 2:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 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; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9DfZ05ekJs8T14IexYE_dfQB5YO7mbpjfqNsyKH1ZVZlojiMAh7o0xBQlJ8b9MO_5SMT-OOe6L5gtlJjH1uaRxd3qZ-7L0zE4zgGIoAe7Z7nHqsUQS-TjJvSagWjRux3ebIP7-EjZ6KU/); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9DfZ05ekJs8T14IexYE_dfQB5YO7mbpjfqNsyKH1ZVZlojiMAh7o0xBQlJ8b9MO_5SMT-OOe6L5gtlJjH1uaRxd3qZ-7L0zE4zgGIoAe7Z7nHqsUQS-TjJvSagWjRux3ebIP7-EjZ6KU/) 0 -32px; padding: 8px 0 0 10px; }<br />

Dán vào HTML/Javacritp
<div id="menu6"><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">Link5</a></li> </ul></div>


Mẫu 3:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 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; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUu94djzFASW3LHG59BjxTQmYT4xv2cg3g15ynNy4CkolQO2f6z-n5NLq_jBRPLND4WfJbCmjsCpr8aQgEdQzf6wTGhgOPCa0PsymlSeVpgP92sU5WmA7h648Tg59j5dCS_bocJQwHGaE/); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUu94djzFASW3LHG59BjxTQmYT4xv2cg3g15ynNy4CkolQO2f6z-n5NLq_jBRPLND4WfJbCmjsCpr8aQgEdQzf6wTGhgOPCa0PsymlSeVpgP92sU5WmA7h648Tg59j5dCS_bocJQwHGaE/) 0 -32px; padding: 8px 0 0 30px; }<br />

Dán vào HTML/Javacritp
<div id="menu3"><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">Link5</a></li> </ul></div>

Mẫu 4:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4lEZwAVvGpo9ijqIGQKzONTAJgQWrt6q2tQa9jrP9qoCqHHOqcIrAd-TOJBqZy9fwnUjMH5oPuNQSooDmIhzjWdMx32nDZdPGTmu3_jMK9Qav4LOzb1ms7idRIJUOCvO3Zex2Q6JR5g/); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4lEZwAVvGpo9ijqIGQKzONTAJgQWrt6q2tQa9jrP9qoCqHHOqcIrAd-TOJBqZy9fwnUjMH5oPuNQSooDmIhzjWdMx32nDZdPGTmu3_jMK9Qav4LOzb1ms7idRIJUOCvO3Zex2Q6JR5g/) 0 -32px; padding: 8px 0 0 20px; }

Dán vào HTML/Javacript
<div id="menu6"><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">Link5</a></li> </ul></div>



Mẫu 5:

#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 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; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAWK-v3BidQLma-1F9dmJOG2VaIaODWClT3RqybK95cKocBKadLmi_Yw_n8aXdQDIkg201ifZlxvoejx_9bzxD6gL_XU30-CB4JelUvrEnmG1mdliYW9gpR3CL4K3apvIX3iiqa-2f5q4/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAWK-v3BidQLma-1F9dmJOG2VaIaODWClT3RqybK95cKocBKadLmi_Yw_n8aXdQDIkg201ifZlxvoejx_9bzxD6gL_XU30-CB4JelUvrEnmG1mdliYW9gpR3CL4K3apvIX3iiqa-2f5q4/s800/menu14.gif); padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu14"><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">Link5</a></li> </ul></div>



Mẫu 6:

#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 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; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoxZ3b7iwXXDiS-mBdUfK-PfbpLX9dkR0A24lFR-EBx0M6Ts9ELVgRYle2bSIGM6HTb0GRi29HIbM_kHpEMdWivXa0wLGnA36-AEXEgAEnfO23ApWFQtim_sWy1xpJiiRLcgdHalxdB3Y/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoxZ3b7iwXXDiS-mBdUfK-PfbpLX9dkR0A24lFR-EBx0M6Ts9ELVgRYle2bSIGM6HTb0GRi29HIbM_kHpEMdWivXa0wLGnA36-AEXEgAEnfO23ApWFQtim_sWy1xpJiiRLcgdHalxdB3Y/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Dán vào HTML/Javacript
<div id="menu7"><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">Link5</a></li> </ul></div>



Mẫu 7:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 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; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS4NIMBEwsUufiYiHqEqV3s4NwKhbmjhMVz-t7Qsb4FRRBfEGfiDnJYqUi860z79YylyCKpw13iFIUDu9pQJcNqyMZ9vG46ReBfDM04BXIbh26UQV0_VbUV_ZjxckCZJllFT6TvU5nsfc/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS4NIMBEwsUufiYiHqEqV3s4NwKhbmjhMVz-t7Qsb4FRRBfEGfiDnJYqUi860z79YylyCKpw13iFIUDu9pQJcNqyMZ9vG46ReBfDM04BXIbh26UQV0_VbUV_ZjxckCZJllFT6TvU5nsfc/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS4NIMBEwsUufiYiHqEqV3s4NwKhbmjhMVz-t7Qsb4FRRBfEGfiDnJYqUi860z79YylyCKpw13iFIUDu9pQJcNqyMZ9vG46ReBfDM04BXIbh26UQV0_VbUV_ZjxckCZJllFT6TvU5nsfc/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu2"><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">Link5</a></li> </ul></div>



Mẫu 8:

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 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; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMj_4HXRne7mQTW8o6pXz5OXcV3ASbXfvikm-15P_AtnpzQDvHtadCvQqE-KPoN2syz3M3Q0DAICp_0pcjhtbKL_iZKu9R_p78WfGke49kpvgjAcme7cn_coSwlgkPMdwMlHd7pLQruf0/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMj_4HXRne7mQTW8o6pXz5OXcV3ASbXfvikm-15P_AtnpzQDvHtadCvQqE-KPoN2syz3M3Q0DAICp_0pcjhtbKL_iZKu9R_p78WfGke49kpvgjAcme7cn_coSwlgkPMdwMlHd7pLQruf0/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMj_4HXRne7mQTW8o6pXz5OXcV3ASbXfvikm-15P_AtnpzQDvHtadCvQqE-KPoN2syz3M3Q0DAICp_0pcjhtbKL_iZKu9R_p78WfGke49kpvgjAcme7cn_coSwlgkPMdwMlHd7pLQruf0/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu9"><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">Link5</a></li> </ul></div>



Mẫu 9:

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 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; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuqufBklKImNRa4uRv-87PQn-FeQ0Ui7arYwJhnzUYZ88KcSNrAufgNfDgsi8XFu5uv4uFJa0zadcG49sq76MDPfMEINMKnUOSV7LSBdBy3K6fzaxkB4m7WrFDk0Rf1oXy9YX18UTCrLk/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuqufBklKImNRa4uRv-87PQn-FeQ0Ui7arYwJhnzUYZ88KcSNrAufgNfDgsi8XFu5uv4uFJa0zadcG49sq76MDPfMEINMKnUOSV7LSBdBy3K6fzaxkB4m7WrFDk0Rf1oXy9YX18UTCrLk/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }

Dán vào HTML/Javacript
<div id="menu12"><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">Link5</a></li> </ul></div>



Mẫu 10:

#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 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; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0Xvy9CDLtC0OLCiql1I9cO9CfuXVioItneIalheE86A-9aW044eI0_I0Luf-rN61yIdfpOpmXIc3xVKTVCtg-8s3ZNG-KgYosStXY5XBl31i6A-LYgOOH8Yx14I7nXLtv1jvdVXxCcI/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS0Xvy9CDLtC0OLCiql1I9cO9CfuXVioItneIalheE86A-9aW044eI0_I0Luf-rN61yIdfpOpmXIc3xVKTVCtg-8s3ZNG-KgYosStXY5XBl31i6A-LYgOOH8Yx14I7nXLtv1jvdVXxCcI/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu13"><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">Link5</a></li> </ul></div>



Mẫu 11:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 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; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1I8GB94c-W3OtK3gzVsWvkHTUK04SdimxM_NGI2556-5B-M0OiOVo28n3Snf1mreldov9zJjxeqiOLvccgBXEw66SpYrAACNPdfs1gODA1EtQWd5sIPCcPUSpmrtdY6BGaWB8hGxOKrY/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1I8GB94c-W3OtK3gzVsWvkHTUK04SdimxM_NGI2556-5B-M0OiOVo28n3Snf1mreldov9zJjxeqiOLvccgBXEw66SpYrAACNPdfs1gODA1EtQWd5sIPCcPUSpmrtdY6BGaWB8hGxOKrY/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1I8GB94c-W3OtK3gzVsWvkHTUK04SdimxM_NGI2556-5B-M0OiOVo28n3Snf1mreldov9zJjxeqiOLvccgBXEw66SpYrAACNPdfs1gODA1EtQWd5sIPCcPUSpmrtdY6BGaWB8hGxOKrY/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Dán vào HTML/Javacript
<div id="menu4"><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">Link5</a></li> </ul></div>



Mẫu 12:

#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 20em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

Dán vào HTML/Javacritpt
<div id="navcontainer"><ul id="navlist"><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">Link5</a></li> </ul></div>



Mẫu 13:

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 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; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXgvMZw2EK4vYmPucDgiCVNoxMNhMQF1U5XNR8l1vJWMdI71L6nIjlB5nEfVWXg_C2kcEf9HlQmy19TEIr9EXtRCXLWGIcLZ0HFUnHzt2gALjYw0SJCIowDhzANfD_gNfd9oTbZHx9KE/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXgvMZw2EK4vYmPucDgiCVNoxMNhMQF1U5XNR8l1vJWMdI71L6nIjlB5nEfVWXg_C2kcEf9HlQmy19TEIr9EXtRCXLWGIcLZ0HFUnHzt2gALjYw0SJCIowDhzANfD_gNfd9oTbZHx9KE/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOXgvMZw2EK4vYmPucDgiCVNoxMNhMQF1U5XNR8l1vJWMdI71L6nIjlB5nEfVWXg_C2kcEf9HlQmy19TEIr9EXtRCXLWGIcLZ0HFUnHzt2gALjYw0SJCIowDhzANfD_gNfd9oTbZHx9KE/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

Dán vào HTML/Javacript
<div id="menu8"><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">Link5</a></li> </ul></div>



Mẫu 14:

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 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; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AA03YtJPiMRb60MAVZezK3aYFnyRS-2sBqbS8hWiRBdQJL8WzackJxIhz84z7gQmrYWFTzRuXYyHOVxS3HfsAIAp5eyxx3IeVHGXs3KB4kPlvYOc16txfcPysxCsnVyJWsMUr15Iabs/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AA03YtJPiMRb60MAVZezK3aYFnyRS-2sBqbS8hWiRBdQJL8WzackJxIhz84z7gQmrYWFTzRuXYyHOVxS3HfsAIAp5eyxx3IeVHGXs3KB4kPlvYOc16txfcPysxCsnVyJWsMUr15Iabs/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Dán vào HTML/Javacript
<div id="menu8"><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">Link5</a></li> </ul></div>



Mẫu 15:

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 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; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Xr9UDdojA4xzApshFqLHkPaVQatcIPsCpDJdQP7D6l5Zg8KwNyILeEM_IYmwf8TR1y8-lWy39-sTxj7RXoxVMhOSYxjR2lmuqTmsZlvXajevvPsRPW3bUltxaYv6GSkxElBIu65Nr98/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Xr9UDdojA4xzApshFqLHkPaVQatcIPsCpDJdQP7D6l5Zg8KwNyILeEM_IYmwf8TR1y8-lWy39-sTxj7RXoxVMhOSYxjR2lmuqTmsZlvXajevvPsRPW3bUltxaYv6GSkxElBIu65Nr98/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu1"><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">Link5</a></li> </ul></div>



Mẫu 16:

#navcontainer { background: #f0e7d7; width: 100%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 100%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

Dán vào HTML/Javacript
<div id="navcontainer"><ul id="navlist"><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">Link5</a></li> </ul></div>



Mẫu 17:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 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; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheOy2KVBcxCyZSn1Kpxt0GhfNCelrG7NCuq6gXeJle6n2I9nrJm0DS7JZnqv7JkVpjLcks1RTH8deu6duQAaPnFy2d-7aGKYWn_9nLdbe1UR7ECX7BJC5LsBjSQnHR6t0gY7EktKFIpGg/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheOy2KVBcxCyZSn1Kpxt0GhfNCelrG7NCuq6gXeJle6n2I9nrJm0DS7JZnqv7JkVpjLcks1RTH8deu6duQAaPnFy2d-7aGKYWn_9nLdbe1UR7ECX7BJC5LsBjSQnHR6t0gY7EktKFIpGg/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu3"><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">Link5</a></li> </ul></div>



Mẫu 18:

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 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; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKH49WkCQeHv9JMNqJN2jPmfWwJ35ROgVk7pFAaaz2W6cbB-QAXjzjz91Juz4z4CTsrkJIHQLjxlcEIPe-o4dTjjuTEpvjoQonPLpcYj-psuvwOCcztYssATG-RRgQO946pKi9S7hDfw4/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKH49WkCQeHv9JMNqJN2jPmfWwJ35ROgVk7pFAaaz2W6cbB-QAXjzjz91Juz4z4CTsrkJIHQLjxlcEIPe-o4dTjjuTEpvjoQonPLpcYj-psuvwOCcztYssATG-RRgQO946pKi9S7hDfw4/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }


Dán vào HTML/Javacript
<div id="menu11"><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">Link5</a></li> </ul></div>



Mẫu 19:

#button { width: 20em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }<br />

Dán vào HTML/Javacript
<div id="button"><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">Link5</a></li> </ul></div>



Mẫu 20:

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu 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; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcPRydv9qnDJiXhusF53Co3EekDcBqhn6-n68YtajwH9qBkFKr1b9hSEliVF_DFTjhbH0KBZbooy8laBJmY3XFRtE3ZxLw3Enupz2V-lH34TAQrO_UT8Hc7hjFhH1O7ii4dGWrP8SGKI/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcPRydv9qnDJiXhusF53Co3EekDcBqhn6-n68YtajwH9qBkFKr1b9hSEliVF_DFTjhbH0KBZbooy8laBJmY3XFRtE3ZxLw3Enupz2V-lH34TAQrO_UT8Hc7hjFhH1O7ii4dGWrP8SGKI/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcPRydv9qnDJiXhusF53Co3EekDcBqhn6-n68YtajwH9qBkFKr1b9hSEliVF_DFTjhbH0KBZbooy8laBJmY3XFRtE3ZxLw3Enupz2V-lH34TAQrO_UT8Hc7hjFhH1O7ii4dGWrP8SGKI/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu"><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">Link5</a></li> </ul></div>



Mẫu 21:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 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; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQL_drvC_44qTo3R1HFjbo9nkW78xPiZFNPIHzokWYgeCt-BSeZHmd5mASBl6AuaD_2K2RfQH_RzCiYwkM95DP8bW-Of-mVqpeDJRMUghtnkKnH5_fvhCb9M3dEKh5PUh5Xuvo23pHd48/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQL_drvC_44qTo3R1HFjbo9nkW78xPiZFNPIHzokWYgeCt-BSeZHmd5mASBl6AuaD_2K2RfQH_RzCiYwkM95DP8bW-Of-mVqpeDJRMUghtnkKnH5_fvhCb9M3dEKh5PUh5Xuvo23pHd48/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

Dán vào HTML/Javacript
<div id="menu2"><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">Link5</a></li> </ul></div>



Mẫu 22:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 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; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsRy5R3DXowepxZiplf_F-Z_cc3mm3HQGvuboEEdT4t7Wz-UhsYKg072ELM-62I9WFATt6uRILC0vIVoacWjt-sNSMCfNrLv_JCIVhM-37inUOccTe2AkaWZ8AX_3lTH4tI79bk8JVXHI/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsRy5R3DXowepxZiplf_F-Z_cc3mm3HQGvuboEEdT4t7Wz-UhsYKg072ELM-62I9WFATt6uRILC0vIVoacWjt-sNSMCfNrLv_JCIVhM-37inUOccTe2AkaWZ8AX_3lTH4tI79bk8JVXHI/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsRy5R3DXowepxZiplf_F-Z_cc3mm3HQGvuboEEdT4t7Wz-UhsYKg072ELM-62I9WFATt6uRILC0vIVoacWjt-sNSMCfNrLv_JCIVhM-37inUOccTe2AkaWZ8AX_3lTH4tI79bk8JVXHI/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

Dán vào HTML/Javacript
<div id="menu5"><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">Link5</a></li> </ul></div>



Mẫu 23:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 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; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivepWc1xjE1sNKyB5N9QEM0PF2Qm716SXUggVnRcnP9sQclbEdK173fWkxSZ42mQ29rk59dwx75ZO4Esy_9Dwg5fCzOLZ8d8LAVjEjFS_Lb5Zar7AgiCpXjknw-Ak0BRL-n0Vq-nxhCQA/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivepWc1xjE1sNKyB5N9QEM0PF2Qm716SXUggVnRcnP9sQclbEdK173fWkxSZ42mQ29rk59dwx75ZO4Esy_9Dwg5fCzOLZ8d8LAVjEjFS_Lb5Zar7AgiCpXjknw-Ak0BRL-n0Vq-nxhCQA/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }


Dán vào HTML/Javacript
<div id="menu5"><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">Link5</a></li> </ul></div>



Mẫu 24:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 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; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcFnBPEmLmTo4otNaFo8beNIZHRprr3jZS2IvgHKvPpfJ2mD3JBiVV8u-5kHtli-RdvoUHt3ajHLwugc2HxoYG7vaXTfPoiq4PKGn-PrVG7oVHTd-ysw22BGtFMX1DKxQNGcXt81wZ8I/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOcFnBPEmLmTo4otNaFo8beNIZHRprr3jZS2IvgHKvPpfJ2mD3JBiVV8u-5kHtli-RdvoUHt3ajHLwugc2HxoYG7vaXTfPoiq4PKGn-PrVG7oVHTd-ysw22BGtFMX1DKxQNGcXt81wZ8I/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu4"><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">Link5</a></li> </ul></div>



Mẫu 25:

#menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 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; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibs8tToW_Pew_XzbSt0UWvgkM0DyeZ8M4rPEExN9TiBRgPCA9T7s6UCMzg1x52B8Rk6R3M0r7TWrSk5RR37soG-MZ20HUbYK_uRAt6T4-ALlQCXrVVFR3OTS8sMG1e0IK-T0VUiGRxIf4/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibs8tToW_Pew_XzbSt0UWvgkM0DyeZ8M4rPEExN9TiBRgPCA9T7s6UCMzg1x52B8Rk6R3M0r7TWrSk5RR37soG-MZ20HUbYK_uRAt6T4-ALlQCXrVVFR3OTS8sMG1e0IK-T0VUiGRxIf4/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

Dán vào HTML/Javacript
<div id="menu10"><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">Link5</a></li> </ul></div>v style="text-align: justify;"><br /> <span style="font-size: large;"></span></div>



CHÚC CÁC BẠN CÓ MỘT MENU DỌC ĐẸP CHO BLOG