Tạo tab có nội dung trượt liên tục theo thời gian - Ứng dụng của Mootools
[FD's BlOg] - Thủ thuật có thể áp dụng cho các widget của Sidebar có nội dung dài. Có kèm theo nút Star/Resume.Các bạn có thể xem trực tiếp demo tại đây.
☼Bây giờ ta bắt đầu :
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đọan code javascript này vào sau dòng <head>
<script language="javascript" src="http://cnetjavascript.googlecode.com/files/mootools.svn.js" type="text/javascript"></script>
5. Tiếp tục xuống dưới, chèn tiếp đọan code CSS bên dưới ngay trên dòng ]]></b:skin>
#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:300px;
height:364px;
margin:0 auto;
}
#NewsTicker h1{
padding:6px; margin:0; border:0;
background:#dfe9d5;
color:#000000;
font-size:11px;
font-weight:bold;
}
#NewsVertical {
width: 300px;
height: 300px;
display: block;
overflow: hidden;
position: relative;
}
#controller{
padding:6px;
font-size:11px;
color:#666;
}
#play_scroll_cont{display:none;}
/* --------------- */
/* Ticker Vertical */
#TickerVertical {
width: 300px;
height: 330px;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerVertical li {
display: block;
width: 288px;
color: #333333;
text-align: left;
font-size: 11px;
margin: 0;
padding: 6px;
float: left;
}
#TickerVertical li .NewsTitle{
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
margin-bottom:6px;
}
#TickerVertical li .NewsTitle a:link,
#TickerVertical li .NewsTitle a:Visited {
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
margin-bottom:6px;
text-decoration:none;
}
#TickerVertical li .NewsTitle a:hover {
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
margin-right:10px;
}
#TickerVertical li .NewsFooter{
display: block;
color: #000000;
font-size: 10px;
margin:6px 0 14px 0;
}
- Lưu ý: Hãy thay đổi các thuộc tính : màu chữ(color), màu nền(background), độ rộng(width, height), ... theo ý bạn.
6. Save template lại.
7. Tạo 1 widget HTML/Javascript, rồi dán code HTML bên dưới vào:
<div id="NewsTicker">
<h1>FD's BlOg - NewsTicker</h1>
<div id="controller">
<div id="stop_scroll_cont"><a id="stop_scroll"><img src="http://woorktuts.110mb.com/newsticker/pic/stop.png" width="14" height="14" border="0" align="absmiddle" /></a> Stop news scroll</div>
<div id="play_scroll_cont"><a id="play_scroll"><img src="http://woorktuts.110mb.com/newsticker/pic/play.png" width="14" height="14" border="0" align="absmiddle"/></a> Play news scroll</div>
</div>
<div id="NewsVertical">
<ul id="TickerVertical">
<li>
TEXT 1
</li>
<li>
TEXT 2
</li>
</ul>
</div>
</div>
<script language="javascript" type="text/javascript" src="http://data.fandung.com/js/newsticker.js">
</script>
- Lưu ý: nội dung sẽ trượt lần lượt theo thẻ <li>{nội dung}</li> , do đó bạn cần đặt thẻ <li> cho đúng vị trí để khi trượt trông hợp lý nhất.
+ Code màu cam chính là code tạo nút : Play/Stop
Chúc các bạn thành công.
Theo woork
- Tạo thumbnail cho ảnh với CSS
- Kỹ thuật tạo bóng đổ cho ảnh hoặc cho các khối nội dung
- Kỹ thuật load ảnh trước bằng CSS
- CSS menu liDock - Một dạng menu Dock
- 4+ Hiệu ứng TEXT đơn giản từ CSS
- Menu dọc sổ ngang - Chỉ sử dụng CSS
- Bo 2 cạnh bên với CSS dùng hình ảnh
- Tạo ngôi hình ngôi sao với CSS Border
- 18 đọan code CSS ngắn - Rất có ích cho việc chỉnh sửa code CSS của template
- Tạo tab nội dung với CSS
- Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)
- Bộ sưu tập 31 style menu nằm ngang
Comments[ 0 ]
Đăng nhận xét