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ật1. Đă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>
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;
}
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>
<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
Tags:
Blogspot nâng cao
Chao ban Trai Dat Mui.
Trả lờiXóaBan 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
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óaAnh Ơ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/
Trả lờiXóaNhờ anh hướng dẫn em fix qua email và qua comment này đc ko ak!
Email em là: quocvietpc@gmail.com
Cảm ơn anh trước nhé
Trả lờiXóaAnh 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óahjx! 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óaAnh 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óaadmin ơ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.
Trả lờiXóathanks bạn trước nhé
@ Harry Edward Nếu muốn di chuyển nút Play/Stop sang trái bạn tìm đến code css sau
Trả lờiXóa[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ùi, không ngờ bạn trả lời nhanh vậy, thanks bạn nhiều nhé
Trả lờiXóachuẩn không cần chỉnh, thank
Trả lờiXóacủa mình sao nó không chạy nhỉ?: sihuong.blogspot.com
Trả lờiXóaSAO CỦA MÌNH NÓ KO CHẠY BẠN ƠI
Trả lờiXóaSite bạn là site nao?
XóaBạ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%
Trả lờiXóaNgoà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