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;
}
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>
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ài viết chưa có nhận xét nào.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :
[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]
» Có thể sử dụng các thẻ <b>,<i>,<a>.
BlOg FD chính thức đóng comment của khách ẩn danh.
BlOg FD.