Tạo menu dọc cho nhãn
Posted by Tung Thanh Ly Vietnam on Monday, November 03, 2014 with No comments
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.
Read more: TẠO MENU DỌC CHO NHÃN | dunghennessy
Under Creative Commons License: Attribution Share Alike
Đầ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)
Read more: TẠO MENU DỌC CHO NHÃN | dunghennessy
Under Creative Commons License: Attribution Share Alike
Mẫu 01
#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/AVvXsEhae3M3WpLvj4tTzfNs6ROZlhdr5Ux3gKXC53tRxc8GryML6QHFa9hXlohpmt9S5uexkN3pkv4lamPFf8j-9j-0NxPYfDUlrUlcqf9-pyVSK8m51adqVf5og7z5bx94OpGakT8ZlYwthvw/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhae3M3WpLvj4tTzfNs6ROZlhdr5Ux3gKXC53tRxc8GryML6QHFa9hXlohpmt9S5uexkN3pkv4lamPFf8j-9j-0NxPYfDUlrUlcqf9-pyVSK8m51adqVf5og7z5bx94OpGakT8ZlYwthvw/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 02
#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/AVvXsEjEHXLZyc2YB5VfDbB8-w4y7rTFaCBfrtg421LwnWci1RotHIp1i3yjxTBQVVFzKTudw5qI4IKZhhW4kbeQWzF-UTm1TtNnlMI2asX_vniSlWtpcPW3HuOfgCa_EHT2SxDLt-uKabVOxqo/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHXLZyc2YB5VfDbB8-w4y7rTFaCBfrtg421LwnWci1RotHIp1i3yjxTBQVVFzKTudw5qI4IKZhhW4kbeQWzF-UTm1TtNnlMI2asX_vniSlWtpcPW3HuOfgCa_EHT2SxDLt-uKabVOxqo/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 03
#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/AVvXsEhT5vN_64UHNha9dHLOsaseqJpTWuvsKJPIgVrw0iWAdBqT2mSadcEPPoF80s0zTvo1yu4POTy28WJuu5lwkqsztijaZzR5aG7HmgBIfqlf6WDWC3Toiqx1Dv4UXCKqrBwDL6SDcrVUWKY/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/AVvXsEhT5vN_64UHNha9dHLOsaseqJpTWuvsKJPIgVrw0iWAdBqT2mSadcEPPoF80s0zTvo1yu4POTy28WJuu5lwkqsztijaZzR5aG7HmgBIfqlf6WDWC3Toiqx1Dv4UXCKqrBwDL6SDcrVUWKY/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/AVvXsEhT5vN_64UHNha9dHLOsaseqJpTWuvsKJPIgVrw0iWAdBqT2mSadcEPPoF80s0zTvo1yu4POTy28WJuu5lwkqsztijaZzR5aG7HmgBIfqlf6WDWC3Toiqx1Dv4UXCKqrBwDL6SDcrVUWKY/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 04 - Vietnamguidebook
#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 05 - Trắng link xanh dương
#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/AVvXsEhmBQlQ15WlYnuPnieFYXzDcNm4oB68_BcBSRiw2OqA6E6_3uM0ruP8aEbSrusB-l9z8zi2oA6WdxtbTIC6_oUSfCBaljzqf8Pev4TBK33HSCkkDblfnhxV3ywmB_J0jODmbM5nUtD1W6M/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBQlQ15WlYnuPnieFYXzDcNm4oB68_BcBSRiw2OqA6E6_3uM0ruP8aEbSrusB-l9z8zi2oA6WdxtbTIC6_oUSfCBaljzqf8Pev4TBK33HSCkkDblfnhxV3ywmB_J0jODmbM5nUtD1W6M/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 04 - Vietnamguidebook
#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 05 - Trắng link xanh dương
#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/AVvXsEhmBQlQ15WlYnuPnieFYXzDcNm4oB68_BcBSRiw2OqA6E6_3uM0ruP8aEbSrusB-l9z8zi2oA6WdxtbTIC6_oUSfCBaljzqf8Pev4TBK33HSCkkDblfnhxV3ywmB_J0jODmbM5nUtD1W6M/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmBQlQ15WlYnuPnieFYXzDcNm4oB68_BcBSRiw2OqA6E6_3uM0ruP8aEbSrusB-l9z8zi2oA6WdxtbTIC6_oUSfCBaljzqf8Pev4TBK33HSCkkDblfnhxV3ywmB_J0jODmbM5nUtD1W6M/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 06 - Xám
#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/AVvXsEhXGeVUV7av1ZshbIiDBC9rex6_1pRq-UANRBDOR6p7FIfk7FLgcsVCA0XQ7VITcZinqeyDz4TfDY_EqsNNETzlmzpAh-PeJ0fmmJyWOLo0RuHShUFjLcUdYs_4cwA-JQ345S0v5fOfMO8/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXGeVUV7av1ZshbIiDBC9rex6_1pRq-UANRBDOR6p7FIfk7FLgcsVCA0XQ7VITcZinqeyDz4TfDY_EqsNNETzlmzpAh-PeJ0fmmJyWOLo0RuHShUFjLcUdYs_4cwA-JQ345S0v5fOfMO8/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>
Source: http://dunghennessy.blogspot.com/2011/05/tao-menu-doc-cho-nhan.html
0 comments:
Post a Comment