Cách tạo Recent Posts tự động scroll với nút Stop/Play

Ròm làm theo được rồi ,chỉ còn chú thích thêm vào những gì Ròm đã hiểu .

bongnguoilangle.blogspot.de

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

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

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>
Code dưới nên chú ý và đừng quên phần này ,vì đây là phần quan trọng nhất .Còn những phần khác thì tùy chỉnh không quan trọng mấy
home_page = "http://thuoaymuahong.blogspot.com/"; //thay bằng địa chỉ blog của bạn .Cuối link chú ý tới cái dấ "/ " coi nó đúng không ,vì nó có thể dư ra một cái dấu / khi copie dán vào thay .
____________________________________

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh3.googleusercontent.com/-_Fv9pINaLTc/UHvEhtj2_aI/AAAAAAAAEnI/tzRrE_naY_0/s225/MG-4278-Blogspot.jpg";

//thay bằng link tới hình bạn muốn hiển thị làm Thumnail khi trong bài viết không có hình ảnh
showRandomImg = true;
imgwidth = 42; //Chiều rộng ảnh thumb
imgheight = 40; //Chiều cao ảnh thumb
dcmcolor = "#000033";
dcmsize = "1";
aBold = true;
text = "nhận xét";
showPostDate = true; //nếu không muốn hiển thị ngày đăng thay TRUE thành FALSE
summaryPost = 120; // số ký tự nội dung bài viết
icon = " Â» ";
numposts = 8; //số bài viết hiển thị
label = "Bài Viết Mới Nhất"; //thay bằng tên nhãn trên blog của bạn
home_page = "http://thuoaymuahong.blogspot.com/"; //thay bằng địa chỉ blog của bạn
</script>

<script language="javascript" type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/mootools.1.11.js"></script> ______________________________________

5. Chèn tiếp code CSS sau vào trước thẻ ]]></b:skin>

______________________________________

#NewsTicker{
border:solid 1px #cccccc;
background:#eaf5e0; /* màu nền của khung tiện ích, nếu bạn muốn nền trong suốt thì thay mã màu này thành transparent
width:315px; /* độ rộng của tiện ích*/
height:450px; /* 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
<h1>Bài Viết Mới Nhất</h1> Có thể viết theo ý mình
_________________________

<div id="NewsTicker">
<h1>Bài Viết Mới Nhất</h1>
<div id="controller">
<div id="stop_scroll_cont"><a id="stop_scroll"><img src="https://lh5.googleusercontent.com/-n2JuB67fY4U/UHvJ0GOe01I/AAAAAAAAEnc/

7dSLdpEfNGE/s14/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/-e3RVY-noZ44/UHvKOkS_-iI/AAAAAAAAEnk/

s3cY5IdkA_8/s14/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://bongnguoilangle.googlecode.com/files/re_post_autoscroll.js"></script>

</div></div>

<script language="javascript" type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/newsticker.js"></script>
________________________________

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

Chúc các bạn tạo được 1 trang blog như ý!

Bóng Người Lặng Lẽ

7 nhận xét:

Unknownlúc 04:03 15 tháng 10, 2012
[img]http://i1138.photobucket.com/albums/n526/gioheomay54/397769_134964169950777_100003115852090_170160_1484165559_n.jpg[/img]

Hú hí
Trả lờiXóa
Trả lời
Unknownlúc 05:28 15 tháng 10, 2012
Đẹp quá Ròm ơi ....
Trả lờiXóa
Trả lời
Unknownlúc 05:30 15 tháng 10, 2012
Chị ko hiểu làm cái này với mục đích gì Ròm ơi
Trả lờiXóa
Trả lời
Từ Thứclúc 14:11 15 tháng 10, 2012
Thanks Ròm, anh quên ko thay địa chỉ blog của mình.
Trả lờiXóa
Trả lời

Thêm nhận xét

Bấm vào dưới avata "Tham gia trang web này " để có thể biết bài mới của Ròm

Sách Xưa của một thời VNCH - Lầu 2

Thứ Hai, 15 tháng 10, 2012