Tạo thanh Navbar News (hiển thị bài viết mới nhất) với hiệu ứng chạy chữ

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.

Xem demo trực tiếp ở đây

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://fandung.blogspot.com/";

</script>
<script src="http://fandung.110mb.com/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://fandung.110mb.com/navbar-news/nb-post.js) lại thành http://fandung.110mb.com/navbar-news/nb-label.js
+ home_page = "http://fandung.blogspot.com/"; : đổi lại thành URL của blog bạn.

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

Tạo thanh Navbar News (hiển thị bài viết mới nhất) với hiệu ứng chạy chữ