Tạo tab có nội dung trượt liên tục theo thời gian

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

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

8

: Cám ơn bạn nhiều, bài viết rất cool :D
: cám ơn bạn đã ủng hộ, giới thiệu với người khác blog của mình nhé :D
: COMING SOON gì nữa :D , Viết ra luôn đi nào :)
: Hết sức thú vị Đấy Phan Dũng ạ :D !!

Có vẻ cái Widget này tuỳ biến cao lắm đây :) , Mình cho cái gì vô nó cũng Cuộn đc cả :)
: uh, cuộn hết, chỉ cần bạn đặt những gì muốn cuộn chung vào trong cùng thẻ <li> {Nội dung}</li> thì mặc định tất cả những dữ liệu trong thẻ đó sẽ được cuộn chung 1 lượt, và muốn tạo nhiều thì cứ việc thêm các khối <li> {Nội dung}</li>

:D
: sao mình làm mà html không nhận bạn ak??
: giúp mình nha :(
: FD có thể giúp mình tạo 1 cái giống phần THỐNG KÊ DIỄN ĐÀN TRONG site này http://softvn.mooo.com

nhưng hay hơn không , làm giống phần các tab nội dung của dũng đấy

cảm ơn dũng trc nha