Loading post navigation ...
 
 

Pro page

21
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[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.
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://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.


Enter your mail address:

21

Khách (ẩn danh)

Hay lắm FD ơi, ủng hộ FD :D

fandung

thanks :D

^^

cảm ơn nhìu ^^ ! ngày nào cũng có 1 cái mới thế này thix nhỉ ^^ !

Khách (ẩn danh)

sao minh làm ko đc nhỉ

fandung

Nhắc nhở bạn chút nhé, sau này nhớ để tên của mình lại.

Còn việc bạn chưa thực hiện được thì bạn thử xem lại sao. Cái thủ thuật này đã có nhiều bạn thực hiện được rồi. Code mình đưa ko có sai đâu, bạn thử xem lại kĩ đi nha.

Thanks đã ghé thăm blog của mình.

Anh2

Dũng ơi! Sao cái thủ thuật này Mình làm ko đc nhỉ???

Phan Dũng

@Mr.Nguyễn : mình test rồi ko sao cả. Bạn đọc kĩ hướng dẫn ở trên nhé. Nếu muốn hiển thị các bài viết mới của cả blog thì dùng link JS :
http://fandung.110mb.com/navbar-news/nb-post.js
và ta không cần quan tâm (chỉnh sửa) code label = "Love";

Khi muốn hiển thị các bài viết mới của một nhãn nào đó thì ta mới phải chỉnh sửa code label = "Love"; và đổi link JS lại thành link :

http://fandung.110mb.com/navbar-news/nb-label.js

Khách (ẩn danh)

thủ thuật này hình như có vấn đề , trang demo cũng ko hiện link chạy , mình cũng bị vậy :(

fandung

@MAX : mình thử load file demo rồi, chạy được mà, mình còn qua bên blog yeusuckhoe.blogspot.com xem, thấy bên đó cũng chạy cũng tốt mà.

Phan Dũng

có thể bạn nhầm về file JS đó, trên đó mình có commnet nói về việc này.

Max4download

mình thử nhiều cách mà vẫn ko đc :( . hay tại blog mình là domain .com nên ko đc :((

Đại Cuộc

Cái này không chạy Dũng ơi. Có thể mình thiếu cái gì đó.

Đại Cuộc

Hay trình duyệt mình (IE8) thiếu cái gì.

fandung

@Đại Cuộc : bạn xem lại các chỗ label với homepage xem, có lỗi gì ko. Nhất là ở label, các nhãn có kí tự khoảng trắng phải thay bằng %20

Thủ thuật này không có chịu ảnh hưởng bởi trình duyệt

Đại Cuộc

Cám ơn Dũng nhé, mình mò ra và đã làm được rồi. Đoạn code trên có chỗ này sửa lại nè :

<... language="JavaScript"<
thành :
<... language="JavaScript">

Dũng xem coi phải không ?

fandung

@Đại Cuộc : ô chết, lỗi của mình. Thanks bạn nha, mình sẽ sửa lại ngay

Khách (ẩn danh)

Tất cả các file *.Js của FD đều đã die hết :(

Bloger

file xai ko duoc anh oihttp://www.tiepthi.co.cc/

Bloger

anh oi khong xai duoc em thu het roi , lam on giup em

Khắc Minh

File js ko coi đc FD ơi . Có thể up lại file js ko

Ác Quỷ™

data fandung die toàn tập :(



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home