Tạo Top panel nội dụng trượt lên xuống

[FD's BLOg] - Với việc sử dụng hiệu ứng của mootools, Top panel sẽ làm cho blog của bạn thêm sinh động. Với thủ thuật này, top panel sẽ trượt xuống hoặc lên khi ta tác động vào.

Chỉ với vài dòng code CSS và java là bạn đã có thể tạo cho mình một side-panel. Kết quả sẽ trông giống như hình bên dưới:


Nhấn vào tab "Show Panel" để trượt lên hoặc xuống.

- Trước tiên bạn hãy download gói dữ liệu này về : FD-sidepanel
- Sau đó giả nén ra, ta được như hình bên dưới:


Trong đó :
+ Bạn có thể nhấp vô file index.html để xem trực tiếp demo của side-panel.
+ upload file Java mootools.svn.js lên host của bạn để lấy link.
+ trong thư mục img : sẽ có 2 file ảnh là sub-left.png, sub-right.png . Up 2 file ảnh này lên host để lấy link điền vào code CSS.

☼Bây giờ ta bắt đầu:

1. Đăng nhập blog.
2. Và chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào ngay trên dòng ]]></b:skin>

#top-panel{
background:#e8f3c6;
border-bottom:3px solid #a6c34e;
padding:14px 20px;
text-align:right;
}
#sub-panel{
text-align:center;
}
#sub-panel a{
width:150px;
float:right;
color:#FFFFFF;
text-decoration:none;
margin-right:30px;
font-weight:bold;
background:url(sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
padding:6px;
background:url(sub-right.png) right bottom no-repeat;
display:block;
}

Lưu ý: thay code màu xanh bằng link ảnh mà bạn đã up.

4. Tiếp tục chèn đọan code Java này vào trên dòng </head>

<script type="text/javascript" src="http://cnetjavascript.googlecode.com/files/mootools.svn.js"></script>

<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>

Lưu ý : nên thay code màu xanh bằng link của file Javascript mà bạn đã up lên host. (để tránh hết bandwidth)

5. Save template lại.

6. Và cuối cùng là code HTML của side-panel :(điền code tại nơi bạn muốn hiển thị)

<div id="top-panel">
...
{Nội dung của side-panel}
...
</div>
<div id="sub-panel">
<a href="#" id="toggle"><span>Show Panel</span></a>
</div>

Chúc các bạn thành công.

Xin chào các bạn ghé thăm trang Trần Phúc Minh, mong các bạn có nhận xét góp ý cho trang này