"Tiện ích Recent Posts tự động scroll với nút Stop/Play bằng mootools"

(Traidatmui.com) – Trước đây mình có giới thiệu cùng các bạn một thủ thuật tạo Recent Posts với hiệu ứng Autoscroll bằng JQuery (Xem tại đây). Hôm nay ở thủ thuật này mình sẽ giúp các bạn tạo Recent Posts tự động scroll bằng mootools. Ở thủ thuật này khác trước, ở thủ thuật trước thì tiện ích tự động scroll và bạn không thể dừng nó lại, ở thủ thuật này bạn sẽ có thể tùy chọn Stop Scroll hay Play Scroll rất dễ dàng. Với hiệu ứng mootools tiện ích này sẽ giúp các bài viết của bạn scroll rất mướt và rất tiện lợi với nút Stop/Play. Ban có thể thấy rỏ hơn ở hình ảnh minh họa hay LIVE DEMO bên dưới.

Hình ảnh minh họa
» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
showRandomImg = true;
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
dcmcolor = "#000033";
dcmsize = "1";
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu muốn hiển thị ngày đăng thay FALSE thành TRUE
summaryPost = 300; // số kí tự nội dung bài viết
icon = " » ";
numposts = 15; //số bài viết hiển thị
label = "Advanced blogger"; //thay thành tên nhãn trên blog của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>

<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/mootools.1.11.js"></script>

5. Chèn tiếp code CSS vào trước thẻ ]]></b:skin>
#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0;
width:350px; /* độ rộng của tiện ích*/
height:430px; /* chiều cao của tiện ích*/
}
#NewsTicker h1{
padding:6px;
text-align:center;
margin:0;
background:#dfe9d5;
color:#000000;
font-size:12px;
font-weight:bold;
}
#NewsVertical {
height: 375px; /* chiều cao của nội dung tiện ích*/
display: block;
overflow: hidden;
position: relative;
}
#controller{
cursor:pointer;
padding:5px 5px 0px 5px;
font-size:11px;
color:#666;
margin-left: 265px;
}
#play_scroll_cont{display:none;}
#TickerVertical {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
#TickerVertical li {
display: block;
color: #333333;
font-size: 11px;
margin-bottom: 5px;
padding: 0px 6px 6px 6px;
float: left;
border-bottom:1px solid #ddd;
}
#TickerVertical li .NewsTitle{
color: #000000;
font-size: 12px;
font-weight:bold;
margin:0px;
}
#TickerVertical li a {
margin-bottom:2px;
display: block;
color: #000000;
font-size: 12px;
font-weight:bold;
text-decoration:none;
}
#TickerVertical li a:hover {
color: #666;
text-decoration:underline;
}
#TickerVertical li .NewsImg{
float:left;
border:1px solid #ccc;
padding:2px;
margin-right:5px;
margin-top:2px;
}
#TickerVertical li .NewsFooter{
display: block;
float:right;
color: #000000;
font-size: 10px;
margin:6px 0px 0px 0px;
}

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới
<div id="NewsTicker">
<h1>CÁC BÀI VIẾT MỚI NHẤT</h1>
<div id="controller">
<div id="stop_scroll_cont"><a id="stop_scroll"><img src="https://lh3.googleusercontent.com/_BTztXRwC9ik/TaLLuF7kLRI/AAAAAAAAHzg/XQx63CI1NzE/stop.png" width="14" height="14" border="0" align="absmiddle" /></a> Stop scroll</div>
<div id="play_scroll_cont"><a id="play_scroll"><img src="https://lh6.googleusercontent.com/_BTztXRwC9ik/TaLLud9ObkI/AAAAAAAAHzk/WrU8ixgykM4/play.png" width="14" height="14" border="0" align="absmiddle"/></a> Play scroll</div></div>

<div id="NewsVertical">
<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/re_post_autoscroll.js"></script>

</div></div>

<script language="javascript" type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/newsticker.js"></script>

8. Save tiện ích lại là xong

Nếu bạn muốn bài viết hiển thị theo từng nhãn thì bạn hãy thay code bên dưới
http://data-traidatmui.appspot.com/scripts/re_post_autoscroll.js

thành code sau
http://data-traidatmui.appspot.com/scripts/re_label_autoscroll.js

Đối với file re_post_autoscroll.js thì bạn không cần quan tâm đến nhãn bài viết vì nó sẽ tự động hiển thị các bài viết mới nhất cho toàn blog của bạn.

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

Xem khác cùng chủ đề

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

K-N
5/28/2011 07:03:00 SA Trả lời

Chao ban Trai Dat Mui.
Ban co cai Slide truot ngang o ngay muc video rat dep. Ban co the viet bai huong dan ve no duoc khong?
Xin chan thanh cam on ban truoc nhe! cunghi

Admin
6/12/2011 06:42:00 SA Trả lời

Vâng mình sẽ post bài ở thời gian tới, sau này nếu nội dung không liên quan đến bài viết bạn vui lòng post ở mục Yêu cầu thủ thuật dùm mình nhé.

9/23/2011 02:18:00 SA Trả lời

Anh Ơi! sao cái của em nó cứ ghi là No image vậy! Sửa thế nào vậy anh! anh vào xem nha! http://www.quocvietpc.com/
Nhờ anh hướng dẫn em fix qua email và qua comment này đc ko ak!
Email em là: quocvietpc@gmail.com

9/23/2011 02:19:00 SA Trả lời

Cảm ơn anh trước nhé

Admin
9/23/2011 03:51:00 SA Trả lời

Anh có xem qua nhưng chưa tìm ra nguyên nhân, a đã test nhiều tên miền khác nhau nhưng nó hiển thị ảnh thumb bình thường.

9/23/2011 06:22:00 SA Trả lời

hjx! Sao vậy anh nhỉ? Mong anh giúp em sớm để em còn quảng bá Blog em với bạn bè. :D Em cũng mới tạo blog thôi anh ak!

Admin
9/23/2011 11:17:00 CH Trả lời

Anh không hiểu sao đối với template em thi bị lỗi này, để anh tìm hiểu thêm mà em sử dụng template nào vậy em?

3/03/2012 07:45:00 CH Trả lời

admin ơi, mình có thể chuyển cái nút play/stop sang trái 1 chút được không, blog của mình không hiện ra được hết chữ ở recent post cuối, bạn xem giùm mình nhé http://all-account,blogspot.com.
thanks bạn trước nhé

Admin
3/03/2012 10:10:00 CH Trả lời

@ Harry Edward Nếu muốn di chuyển nút Play/Stop sang trái bạn tìm đến code css sau
[code]#controller{
cursor:pointer;
padding:5px 5px 0px 5px;
font-size:11px;
color:#666;
margin-left: 265px;
}[/code]

Bạn chỉ cần giảm số ở thuộc tính margin-left: 265px; là được.

3/04/2012 06:43:00 SA Trả lời

trùi, không ngờ bạn trả lời nhanh vậy, thanks bạn nhiều nhé

7/27/2013 01:14:00 SA Trả lời

chuẩn không cần chỉnh, thank

6/30/2014 10:22:00 SA Trả lời

của mình sao nó không chạy nhỉ?: sihuong.blogspot.com

8/12/2014 03:17:00 SA Trả lời

SAO CỦA MÌNH NÓ KO CHẠY BẠN ƠI

Admin
8/12/2014 03:27:00 SA Trả lời

Site bạn là site nao?

7/24/2015 02:20:00 SA Trả lời

Bạn ơi bên mình có dịch vụ Đăng tin tự động lên groups trên facebook miễn phí bạn xem qua nhé. miễn phí 100%
Ngoài ra các bạn có thể đọc tin tức tại Kênh tin tức giải trí yeubao.com
Các bạn có thể truy cập link sau để xem thông tin công nghệ
Khoinguoncongnghe.net | kênh thông tin dành cho tín đồ công nghê
cám ơn bạn đã đọc
đăng tin tự động trên facebook miễn phí 100% xem tại Đăng tin tự động lên groups trên facebook miễn phí
xem thủ thuật blogspot, thủ thuật blogger, thủ thuật facebook tại thủ thuật tổng hợp facebook, blogger,coputuer
xem tin tức giới trẻ, các tin nổi bật tin tức nổi bật, tin sao, tin giới trẻ, đời sống xã hội
xem thong tin giải trí, cung hoàng đạo, tại bí mật 12 chòm sao,tâm sự,blog tâm sự

giải trí thư giã relax giải trí thư giãn relax
khám phá du lịch, bi ẩn khám phá du lịch, bí ẩn
kho video giải trí khổng lồ video đời sống xã hội, video giải trí
khởi nguồn công nghệ, xem tin tức công nghệ, tin tức internet
tin tức internet
Tin tức itc , tin tức technogoy tin tức ict

Khám phá công nghệ
khám phá

Thủ thuật công nghê thủ thuật công nghệ, tips





Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang