Mời các bạn truy cập iZdesigner.com để cập nhật những thông tin, thủ thuật mới nhất về Web-Designer.

Một vài thông tin về hộp thông báo nhỏ này:
– Hiển thị được nhiều thông báo.
– Các thông báo sẽ hiển thị random (ngẫu nhiên) sau mỗi lần load trang.
– Có button cho phép đóng phần thông báo lại.

Hình ảnh minh họa:
- Để cho chọn vị trí hợp lý, mình khuyên các bạn nên đặt hộp thông báo này ở phần header của blog.
– Sau khi xác định được vị trí đặt hộp thông báo, các bạn tạo 1 widgetHTML/Javascript và dán code bên dưới vào :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<style type="text/css">
#thbao {
padding:6px 0;
border-bottom:1px solid #e6dac3;
}thu
 
#thbao-margin {margin: 0 auto;}
.thbao-container {
width:705px;
border: 1px solid #f2b768;
padding: 4px;
font-size:90%;
}
.thbao-header {
background: #ff6734;
color: white;
border:1px solid #ffa789;
padding: 5px 10px;
white-space: nowrap;
}
.thbao-body {
background: #fae9c8;
padding: 5px 10px;
width: 99%;
}
.thbao-close {
float: right;
margin-right: -5px;
}
</style>
 
<script language="JavaScript">
function hideitem() {
document.getElementById("thbao").style.display="none";
}
//<![CDATA[
thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
 
tbindex = Math.floor(Math.random() * thbao.length);
//]]>
</script>
 
<div id="thbao">
<div id="thbao-margin">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><b>Note</b></td>
<td>
<a href="#" onclick="hideitem()"><img src="http://www.blogger.com/img/close.png" alt="Đóng lại" /></a>
<span>
 
<script type="text/javascript">
document.write(thbao[tbindex]);
</script>
 
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
- Đầu tiên là việc chỉnh sửa lại code CSS:
Các bạn có thể xem hình minh họa bên dưới rồi thay đổi lại các giá trị của nó để cho hộp thông báo phù hợp với blog của bạn, chủ yếu là chỉnh lại các giá trị màu sắc và kích thước.
- Tiếp theo là chỉnh lại code javascript:Ta thấy có đoạn code như thế này :
1
2
3
4
5
thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
Tất cả nội dung của thông báo phải cho vào dấu nháy đơn. Nội dung hiển thị thông báo cho phép sử dụng thẻ HTML. Ở trên là code mẫu cho 4 đoạn thông báo, nếu là 5 đoạn các bạn chỉ việc thêm vào như code bên dưới :
1
2
3
4
5
6
thbao = new Array(4);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[4]='{Nội dung đoạn thông báo thứ 5}';
Bài viết này được sưu tầm tại BlOg FD
Blog Designer

Hãy cho đi rồi sẽ nhận lại nhiều hơn thế

Đã có nhiều lúc tôi không biết mình sẽ làm được gì ??? Nhưng hãy cứ tin vào chính bản thân mình, tin vào mọi người và đừng để con tim bạn lạc lối. Bạn và tôi sẽ tìm ra được đâu là đích đến để mình biết đường đi.Nếu bạn cần một người bạn, đừng ngại kết bạn với tôi.

Thư Viện Đồ Họa: www.izdesigner.com