Home » TTNC
Thứ Tư, 14 tháng 12, 2011
Tạo thanh Navbar News (hotnew-hiển thị bài viết mới nhất) với hiệu ứng chạy chữ
[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 ở đâyHì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.
Nguồn: fandung.com
You may also...
Hot
-
Bài 2 hướng dẫn sử dụng phần mềm Simatic S7.200 để viết chương trình điều khiển cho PLC. Ngoài ra, cũng hướng dẫn sử dụng phần mềm Simulator...
-
(Traidatmui.com) – Hiện nay có rất nhiều trang website cung cấp cho bạn host miễn phí tuy nhiên không phải hosting nào cũng tốt, cũng đảm...
-
Bài 1 trình bày tổng quan về PLC S7.200, cấu trúc phần cứng, phương thức hoạt động của PLC S7.200. Đồng thời nêu những ưu điểm khi các nhà...
-
Có khá nhiều bạn thắc mắc, gửi yêu cầu cho tôi về cách cài đặt phần mềm cho PLC của Mitsubishi. Tuy nhiên, vì quá bận nên tới nay mới hướng ...
-
Phần mềm tiện lợi trong việc vẽ các sơ đồ mạch điện công nghiệp, được hỗ trợ đầy đủ các kí hiệu của các thiết bị dùng trong công nghiệp như...
-
Babylon là phần mềm từ điển và dịch thuật hàng đầu thế giới, cung cấp cho bạn công cụ trực quan nhất cho mọi nhu cầu dịch thuật của mìn...
-
[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...
-
1 CÁC LỆNH VÀO / RA OUTPUT: Sao chép nội dung của bit đầu tiên trong ngăn xếp vào bit được chỉ định trong lệnh. Nội dung của ngăn xếp không ...
-
Giáo trình Máy điện - Khí cụ điện trình bày cơ bản về các nguyên lý và cấu tạo của các loại máy điện như: Máy biến áp; Máy điện không đồng b...
-
( Traidatmui.com) – Hôm nay xin chia sẻ cùng các bạn thủ thuật tạo Slideshow cho hình ảnh, thủ thuật này mình có thêm hiệu ứng Sroll với 2...
Comments[ 0 ]
Đăng nhận xét