THỨ HAI, 17/03/2025
Chào buổi tối!Chúc các bạn có bữa tối thật vui vẻ và hạnh phúc bên người thân!

Note Đóng lại {Mọi chi tiết xin liên hệ admin}
Giải pháp bán hàng online Số 1 Việt Nam

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.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.

Bạn đã xem chưa

0 nhận xét | Viết lời bình



Copyright © 2014 Blog Thông Tin Tổng Hợp




  • tpm1512

    Tư vấn - Thái AiTi

    Call: 0962.444.744

    tpm1512@gmail.com

    skype tpm1512