Tạo 1 BOX hiển thị random nội dung khi reload trang

[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ảngrdbox[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.