Không biết các bạn đã biết tới thanh menu trượt này chưa , nhưng mình cảm thấy nó rất tuyệt , có vẻ làm cho blog nhìn chuyên nghiệp hơn . Chính vì vậy mà hôm nay , mình xin hướng dẫn các bạn làm thanh menu trượt này.
Đầu tiên , các bạn hãy vào Trình bày (Layout) , chọn tab Chỉnh sửa HTML và không chọn Mở rộng Mẫu tiện ích nhé !
Như thường lệ , việc đầu tiên các bạn cần làm là lưu lại templates trước. Sau khi hoàn tất các công đoạn trên , các bạn tìm code sau
]]>
và thêm ngay trước nó đoạn code tiếp theo.fixed_menu {
position: fixed;
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; }
* html .fixed_menu {position:absolute;}
Các bạn hoàn tất rồi chứ ? Giờ , tìm đoạn code <body> và thêm vào đoạn code tiếp theo bên dướiposition: fixed;
top: 140px;
left: 0px;
width: auto;
margin: 0 0px 0px 0px;
background: #ffffff;
opacity:.900;
filter: alpha(opacity=90);
padding: 7px 5px 5px 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 0px;
}
.fixed_menu a:hover img {
position: relative;
top: 2px;
left: 2px;
border-top: 1px solid #b3b3b3;
border-left: 1px solid #b3b3b3;
border-bottom: 2px solid #999999;
border-right: 2px solid #999999;
}
.fixed_menu a { display: block; }
* html .fixed_menu {position:absolute;}
<body>
<div class='fixed_menu'>
<a href='http://boyprodx.blogspot.com/' title='Home'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/home.png'/></a>
<a href='http://boyprodx.blogspot.com/2008/01/lin-h.html' title='Liên hệ'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/mail_generic.png'/></a>
<a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1753328' title='Nhận tin qua RSS'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/rss_pill_blue_32.png'/></a>
<a href='http://feeds.feedburner.com/boyprodx' title='RSS'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/rss_pill_orange_32.png'/></a>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/up.png'/></a>
</div>
Vậy là xong rồi đấy , các bạn chỉ cần chỉnh lại phần chữ đỏ theo ý của mình. Lưu lại templates và thưởng thức thành quả . Nếu muốn , các bạn có thể xem ví dụ tại đây<a href='http://boyprodx.blogspot.com/' title='Home'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/home.png'/></a>
<a href='http://boyprodx.blogspot.com/2008/01/lin-h.html' title='Liên hệ'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/mail_generic.png'/></a>
<a href='http://www.feedburner.com/fb/a/emailverifySubmit?feedId=1753328' title='Nhận tin qua RSS'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/rss_pill_blue_32.png'/></a>
<a href='http://feeds.feedburner.com/boyprodx' title='RSS'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/rss_pill_orange_32.png'/></a>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img src='http://i259.photobucket.com/albums/hh283/boy_proDX/up.png'/></a>
</div>
Đang tải xin vui lòng chờ...
0 comments:
Post a Comment
[▼/▲] Chèn biểu tượng vui