Wednesday, October 17, 2012

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>
 
&amp;lt;script language="JavaScript"&amp;gt;
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://donghoavangtuthuc.blogspot.com/"; //thay bằng địa chỉ blog của bạn
&amp;lt;/script&amp;gt;

&amp;lt;script language="javascript" type="text/javascript" src="http://bongnguoilangle.googlecode.com/files/mootools.1.11.js"&amp;gt;&amp;lt;/script&amp;gt;

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; /* phần tiêu đề của tiện ích Recent Comments
text-align:center; /* chỉnh các thông số này để đồng bộ với cấu hình theme của bạn
margin:0;
background:#dfe9d5;
color:#000000;
font-size:12px;
font-weight:bold; /* có thể thêm lệnh font-family: để định dạng font cho hợp với các thẻ khác
}
#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; /* tùy chỉnh chữ Play Scroll và Stop Scrool
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>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ư ý!

No comments:

Post a Comment