Tạo hộp thoại thông báo trên blog

Đăng bởi Admin | 17/10/13 | 0 nhận xét

Khi có vẫn đề gì đó cần thông báo hoặc đơn giản chỉ là vì bạn có 1 nội dung gì đó muốn khách truy cập quan tâm thì việc tạo 1 hộp thoại nhỏ cho blog là điều cần thiết phải làm. Mình xin giới thiệu với bạn đọc một hộp thông báo đẹp mắt. Các bạn cũng có thể tham khảo mẫu hộp thông báo dạng hoạt hình khác TẠI ĐÂY

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ý, các bạn nên đặt hộp thông báo này ở phần đầu 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 :


<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>


Chỉnh sửa lại code CSS:
Bạn có thể xem hình minh họa bên dưới và chỉnh lại các giá trị màu sắc và kích thước cho phù hợp với giao diện blog của bạn.

Chỉnh lại code javascript:- Thay các đoạn nội dung màu đỏ ({Nội dung đoạn thông báo thứ 1}...)bằng nội dung thông báo của bạn

- Bạn cũng có thể thêm các đoạn thông báo thứ 5, thứ 6,...vào sau các đoạn thong báo trên theo mẫu: thbao[3]='{Nội dung đoạn thông báo thứ 5}';

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

Bạn cũng có thể tham khảo các mẫu khác dưới đây:

• Tạo hộp tin nhắn giống như Wordpress với nút close sử dụng jQuery cho blogger
• Tạo hộp Thông báo dạng hoạt hình trên blog

                                                                                    Nguồn: BlOg FD - thuthuatweb.net