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>
<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
0 nhận xét:
Đăng nhận xét
♦ Mời bạn gửi Nhận xét của mình. Nếu không có tài khoản Blogger-Google, LiveJournal, WordPress, TypePad, AIM, OpenID, bạn vẫn có thể nhận xét bằng cách chọnComment as là Tên/URL hay Ẩn danh. Tuy nhiên bạn nên chọn Tên/URL với URL có thể để trống. Bạn vui lòng gõ tiếng Việt có dấu.
♦ Bấm vào Xem trước [Preview] bên dưới khung nhận xét nếu muốn xem trước comment đã viết, trước khi post [đăng]. Tương tự, bấm vào Đăng ký qua email [Subscribe by email] để đăng ký theo dõi nhận xét của bài này.
♦ Các bạn tự chịu trách nhiệm với Nhận xét của mình. Nhận xét để phản hồi, đánh giá, góp ý.... suy nghĩ của bạn. Thông qua Nhận xét hãy để cho mọi người biết Bạn là ai.
Xem ký tự của emoticons khỉ Yoyo tại đây.