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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

15 nhận xét

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

    Trả lờiXóa
  2. 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é.

    Trả lờiXóa
  3. 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

    Trả lờiXóa
  4. 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.

    Trả lờiXóa
  5. 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!

    Trả lờiXóa
  6. 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?

    Trả lờiXóa
  7. 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é

    Trả lờiXóa
  8. @ 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.

    Trả lờiXóa
  9. trùi, không ngờ bạn trả lời nhanh vậy, thanks bạn nhiều nhé

    Trả lờiXóa
  10. chuẩn không cần chỉnh, thank

    Trả lờiXóa
  11. của mình sao nó không chạy nhỉ?: sihuong.blogspot.com

    Trả lờiXóa
  12. SAO CỦA MÌNH NÓ KO CHẠY BẠN ƠI

    Trả lờiXóa
  13. 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





    Trả lờiXóa