Loading post navigation ...
 
 

Pro page

6
Nhận xét

[ Yêu cầu ] : Tạo 1 BOX hiển thị random nội dung khi reload trang

| by Phan Dũng | views

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

Theo yêu cầu của bạn Thanh Phương (thphuong.blogspot.com)
[FD's BlOg] - Để thực hiện yêu cầu này, mình sẽ sử dụng lại thủ thuật đã dùng ở bài viết "TabNEWS hiển thị bài viết từ 1 nhãn Random" . Nội dung của box chỉ đơn giản là 1 đoạn text và 1 hình ảnh, khi reload trang ta sẽ được 1 hình ảnh khác và 1 đoạn văn bản khác tương ứng.
Xem demo : LIVE DEMO

Hình ảnh minh họa :

☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<style type="text/css">
#rd-box {
width:200px;
padding:5px;
background:#eee;
border:1px solid #ccc;
}

#rd-box p {
font-weight :bold;
text-align:justify;
}
#rd-box img {
hieght:150px;
width:200px;
}
</style>

&lt;script type='text/javascript'&gt;
rdbox = new Array(3);
rdbox[0] = "\&lt;div id='rd-box'\&gt;\&lt;img src='Link ảnh 1'/\&gt;\&lt;p\&gt;Đoạn Văn bản 1\&lt;/p\&gt;\&lt;/div\&gt;";
rdbox[1] = "\&lt;div id='rd-box'\&gt;\&lt;img src='Link ảnh 2'/\&gt;\&lt;p\&gt;Đoạn Văn bản 2\&lt;/p\&gt;\&lt;/div\&gt;";
rdbox[2] = "\&lt;div id='rd-box'\&gt;\&lt;img src='Link ảnh 3'/\&gt;\&lt;p\&gt;Đoạn Văn bản 3\&lt;/p\&gt;\&lt;/div\&gt;";
rdbox[3] = "\&lt;div id='rd-box'\&gt;\&lt;img src='Link ảnh 4'/\&gt;\&lt;p\&gt;Đoạn Văn bản 4\&lt;/p\&gt;\&lt;/div\&gt;";

index = Math.floor(Math.random() * rdbox.length);
&lt;/script&gt;

- Thay đổi các code màu xanh theo đúng như nội dung mà bạn muốn hiển thị trong box.
- Chú ý code màu đỏ, nếu bạn có 10 đoạn nội dung sẽ được hiển thị random thì code màu đỏ sẽ là rdbox = new Array(9);
- Muốn add thêm nội dung thì chỉ việc add thêm đoạn code này vào :

rdbox[4] = "\&lt;div id='rd-box'\&gt;\&lt;img src='Link ảnh 5'/\&gt;\&lt;p\&gt;Đoạn Văn bản 5\&lt;/p\&gt;\&lt;/div\&gt;";

- Sau đây là hình minh họa các class sử dụng trong box để cho các bạn tiện chỉnh sửa code CSS của Box random này.


4. Save template.
5. Tạo 1 widget HMLT/Javascript và dán code này vào :

<script type='text/javascript'>
document.write(rdbox[index]);
</script>

☼ Một hướng dẫn nhỏ về việc mở rộng nội dung hiển thị :
- Bố cục của box chỉ gồm có 2 phần, đó là phần hình ảnh(nằm trong thẻ img) và phần văn bản (nằm trong thẻ p) , và tất cả nằm trong thẻ div id='rd-box' như code bên dưới:

rdbox[1] = "\&lt;div id='rd-box'\&gt;\&lt;img src='Link ảnh 2'/\&gt;\&lt;p\&gt;Đoạn Văn bản 2\&lt;/p\&gt;\&lt;/div\&gt;";

- Thông thường nội dung của box sẽ có dạng như sau (dạng code HTML):

<div id="rd-box"><img src="Link ảnh 2"/><p>Đoạn Văn bản 2</p></div>

- So sánh 2 đoạn code ta dễ dàng thấy là khi đưa mã code HTML vào thì các kí tự " sẽ chuyển thành ' , các kí tự < , > sẽ được chuyển thành \&lt; , \&gt;

- Như vậy khi bạn muốn thay đổi nội dung hiển thị theo ý muốn thì chỉ việc đổi lại các kí tự như ở trên (trong code HTML của nội dung), rồi đưa vào trong các mảng rdbox[0], rdbox[1], rdbox[2], ...

Ví dụ, ta có đoạn nội dung như sau :

<div id="class1"><h1>Title</h1><div id="content"><img src="link ảnh"/><p>Mô tả nội dung</p></div></div>

Và khi đưa vào mảng ta sẽ được code như sau :

rdbox[1] = "\&lt;div id='class1'\&gt;\&lt;h1\&gt;Title\&lt;/h1\&gt;\&lt;div id='content'\&gt;\&lt;img src='link ảnh'/\&gt;\&lt;p\&gt;Mô tả nội dung\&lt;/p\&gt;\&lt;/div\&gt;\&lt;/div\&gt;";


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


Enter your mail address:

6

Chinhnd

tình hình sau khi blog fandung xuất hiện trên giang hồ, có lẽ phattrien@so chính thức giã từ sân chơi thủ thuật mà chuyển sang công tác market ting các bài viết hay của em FDung nhé.

fandung

Anh cứ nói thế, nhiều người góp thủ thuật vẫn hơn là 1 mình em mà.

CÒn việc marking bài viết hộ em thì em cám ơn anh nhiều :)

Khách (ẩn danh)

Chào bạn, mình là Tùng Shady, admin vn-s.blogspot.com. chúng ta khi làm blogs thường hay tạo liên kết hoặc trao đổi Logo nhằm mục đích kết giao bạn bè, và 1 cái quan trọng nữa là để tăng lu lượng truy cập. Mình thấy rắng nếu chúng ta dùng widget "Danh sách blogs của tôi" để theo dõi RSS của Blogs bạn bè là rất hay, nó sẽ đem lại 1 lu luong truy cập qua lại giữa các blogs -> giúp tăng Traffic.

Mình đã add blogs bạn vào widget Điểm tin blogs của mình, mời bạn viếng thăm và xem thử, mình ko thích liên kết lun tun nên chỉ chọn 7 blogs mình thấy pro nhất để add thuj. Nếu có thể bạn cũng hãy tạo 1 widget như thế nhé ( mình chỉ gợi ý thuj ), rất mong hợp tác với bạn.

fandung

ờh, cái này mình cũng làm quen với nó rồi, vì chưa có nhu cầu sử dụng nên mình ko add (giảm thời gian load đó mà)

Cám ơn góp ý của bạn

Du Phương

Cám ơn Fandung nhiều nhiều ^^

Phan Dũng

@Thanh Phương : 2 yêu cầu của bạn mình đã thực hiện cả rồi đóa nha :D



☺ 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