Xem tin tuc mới

Tạo thanh HotNews sử dụng mootools cho blog

Thứ Bảy, 23 tháng 4, 2011
Với việc sử dụng mootools thì thanh HotNews sẽ trở nên pro hơn nhiều, mặc định các bài viết sẽ tự động luân chuyển trong 1 khoảng thời gian xác định trước, ngoài ra còn có thêm button để điều chỉnh việc hiển thị các bài viết trên thanh hotnews.
Xem demo : LIVE DEMO
p1 Tạo thanh HotNews sử dụng mootools cho blog ~ vn222.com
☼ Các bước thực hiện:
1. Bạn đăng nhập vào tài khoản blogspot
2. Vào phần thiết kế (Design)
3. Chọn tiếp chỉnh sửa HTML (Edit HTML)
4. Thêm code bên dưới vào trước thẻ ]]></b:skin>
.hotnews{
width:448px; /* độ rộng của tiện ích*/
height: 20px; /* độ cao của tiện ích*/
text-align:center;
padding : 0px 0px 0px 82px;
clear : both;
color:#fff;
list-style-type : yes;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2uKdyEviG87KBTSShsZwHN37g16R_8EDQ2SeNPtrLOytr1Zus5bY50ikRCUGum3qgjg8PForB8QZBR-ItnD9sPM4S-Z6tL5krh0_PH97FRDq14J3QCqTuAn_Q06zV1Kg7AQL_IyQmX3bk/) no-repeat left; /*Nền của tiện ích*/
border-right : 0px solid #ff0000;
border-left : 0px solid #0000ff;
}
.hotnews a{
color:#fff;}
.hotnews a:hover{
color:#00ffff;}

5. Save template lại
6. Trở lại phần tử trang thêm một tiện ích HTML/Javascript và thêm code been dưới vào phần tử đó.
<div class="hotnews">
<marquee onmouseout="this.start()" direction="left" ) align="center" scrollamount="4" onmouseover="this.stop()" width="100%" height="25" >
<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
tablewidth = 392;
cellspacing = 1;
borderColor = "";
bgTD = "";
imgwidth = 0;
imgheight = 0;
fntsize = 12;
acolor = "";
aBold = false; /*nếu muốn in đậm text bạn thay FALSE thành TRUE*/
icon ="» ";
text = "no";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = "» ";
numposts = 15; /*số bài viết hiển thị trong tiện ích này*/
home_page = "http://www.tranphucminh.blogspot.com/"; /*thay thành địa chỉ blog của bạn*/
</script><script src="http://traidatmui-tips.googlecode.com/files/hotnews_post.js" type="text/javascript"></script></marquee></div>
Bạn hãy dựa vào các dòng text hướng dẫn (dòng màu xanh) trong code để có thể tùy chỉnh lại cho tiện ích phù hợp với blog của mình.
7. Sau khi hoàn tất việc chỉnh sửa thì bạn hãy save lại

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




0 nhận xét:

Đăng nhận xét

Lên đầu trang