Tạo thanh Navbar News (hiển thị bài viết mới nhất) với hiệu ứng chạy chữ
Chủ Nhật, 14 tháng 6, 2009
[FD's BlOg] - Một vài lệnh đơn giản từ CSS kết hợp với tiện ích "Recent posts" sẽ tạo cho bạn 1 thanh tin tức đơn giản. Do việc hiển thị các bài viết mới theo 1 hàng, nên ta phải dùng tới hiệu ứng chạy chữ từ lệnh marquee.Hình minh họa:
Như các thủ thuật trước, để đơn giản bạn tạo 1 widget HTML/Javascript rồi dán tất cả code bên dưới vào:
<style type="text/css">
.hotnews{
height: 27px;
padding : 0 0 0 100px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3323/3625026490_56322aeda3_o.gif) no-repeat left;
border-top : 2px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
</style>
<div class="hotnews">
<marquee direction="left" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="4" align="center">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://vietwebguide.googlepages.com/LDP08-06-11-01.png";
imgr[1] = "http://vietwebguide.googlepages.com/LDP08-06-11-02.png";
imgr[2] = "http://vietwebguide.googlepages.com/LDP08-06-11-03.png";
imgr[3] = "http://vietwebguide.googlepages.com/LDP08-06-11-04.png";
imgr[4] = "http://vietwebguide.googlepages.com/LDP08-06-11-05.png";
showRandomImg = true;
tablewidth = 392;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";
imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";
text = "no";
showPostDate = false;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 15;
label = "Love";
home_page = "http://www.fandung.com/";
</script>
<script src="http://data.fandung.com/blog/demo/navbar-news/nb-post.js" type="text/javascript"></script>
</marquee>
</div>
- Ở đây mình giữ nguyên code javascript của thủ thuật "Recent posts" mà Anhvo viết, chỉ thay đổi 1 chút trong file javascript. vì thế ta chỉ quan tâm tới 3 dòng code bên dưới:
+ numposts = 15; : số bài viết sẽ hiển thị
+ label = "Love"; : nhãn mà bạn muốn hiển thị, khi muốn hiển thị các bài viết từ nhãn, bạn phải thay link file Javascript phía trên (http://data.fandung.com/blog/demo/navbar-news/nb-post.js) lại thành http://data.fandung.com/blog/demo/navbar-news/nb-label.js
+ home_page = "http://www.fandung.com/"; : đổi lại thành URL của blog bạn.
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét