Loading post navigation ...
 
 

Pro page

32
Nhận xét

[Chia sẻ] - Tạo hộp thoại thông báo cho blog

| by Phan Dũng | views

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

Việc tạo 1 hộp thoại nhỏ cho blog để thông báo 1 sự kiện hoặc 1 vấn đề nào đó cho blog xem ra cũng khá cần thiết cho blog. Có nó ta sẽ không phải mất công viết hẳn 1 bài viết để thông báo (nếu như nó sự kiện đó không cần phải dùng 1 bài viết để thông báo). Thay vào đó ta chỉ cần hiển thị 1 đoạn text nhỏ là được.
Có 1 số bạn xin code phần thông báo của mình, mình đã ok. Còn 1 số khác thì chưa rành việc view code nên có yêu cầu mình chia sẻ đoạn code của hộp thoại thông báo này. Hôm nay mình viết hẳn 1 bài viết để chia sẻ nó.

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 từ blog của mình:

- Để 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 widget HTML/Javascript và dán code bên dưới vào :
<style type="text/css">
#thbao {
padding:6px 0;
border-bottom:1px solid #e6dac3;
}

#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" class="thbao-container">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="thbao-header"><b>Note</b></td>
<td class="thbao-body">
<a href="#" class="thbao-close" onclick="hideitem()"><img src="http://www.blogger.com/img/close.png" alt="Đóng lại" /></a>
<span class="thbao-text">

<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 :
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 :
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}';

Như vậy đã hoàn thành. Chúc các bạn thành công.


Enter your mail address:

32

Jack

Thủ thuật hay quá đi à... mình bóc tem nhé... thanks cậu :p

MoigioiForex.Com

Thỉnh thoảng gặp lỗi này {undefined} ~x(

Linh Dung VnMart

Một thủ thuật hay mà áp dụng rất đơn giản, cảm ơn anh Dũng đã chia sẻ! Hy vọng anh sẽ có nhiều bài viết cho anh em áp dụng! :D

Yolks

Anh dũng đừng quên làm cho cái em kia nhé

MoigioiForex.Com

à, ok rồi, phải chỉnh các thông số cho hợp với số luong thông báo mới không bị lỗi :p

Linh Dung VnMart

@ MoigioiForex.Com: lỗi {undefined} là do bạn thiết lập phần thbao = new Array(n) với các phần bên dưới không chính xác. Phần thbao = new Array(n) là n thì các phần bên dưới phải tạo ra là n+1.

Phan Dũng

@Yolks : uh, rảnh a làm cho.

@MoigioiForex.Com : àh thì ra là cái lỗi đó hả, bạn Linh Dung trả lời đúng rồi đó. Với lại trong bài hướng dẫn mình cũng để code mẫu rõ mà, tại bạn ko để ý đó thôi.

Ngankvn ®

Nội dung thông báo nếu muốn thêm link hay style cho chữ thì phải làm sao Dzũng ??
Cứ thêm luôn và à ?
Hay phải đổi các ký từ > < " / thành các ký tự gì khác ?

fandung

có để ở trên mà Ngân, cho phép sử dụng các thẻ HTML :D

Ngankvn ®

Ồ thế thì ngon :x
Dzũng nâng cấp cho nó có dấu ◄ và ► để di chuyển giữa các thông báo thì hay :D

Phan Dũng

ah, cái đó phải dùng javacript rồi, sẽ nặng thêm đó

Ngankvn ®

Chắc phải có cách để chỉ thêm vài dòng thôi chứ
Nếu thêm hẳn script khác thì đúng là nặng thêm thật

peace19812006

Bài viết rất hay, mình đã áp dụng cho blog, thanks Dũng! :)

Nguyễn Đức

Tông màu vàng này chèn vô trang em cũng hợp nên em ăn cắp luôn code thêm vào, hehe.

Nơi Tổ Ấm Bắt Đầu

Cảm ơn FD nhé, sẽ thử dùng trong tương lai nếu có thông báo

Ngankvn ®

Cái widget bài hot ấy Dzũng, mình dùng CSS để nó hiện một icon ngọn lửa phía trước mỗi bài

Có cách nào để đánh số từ 1-10 cho nó không ?

Yolks

Anh dũng đẩy tiến độ giùm em, đã 7 days rồi anh ơi :D ^^, em đang rất cần để hoàn thành xong cái temp

Blog Thông Tin

thủ thuật quá hay, thanks FD nhé

May Thy

Lâu rồi không thấy bạn viết bài nhỉ, hay là chuyển sang blog khác rồi?

Công ty Cổ phần Giao nhận và Thương mại Viko

mình đã học được rất nhiều từ những bài viết của FD. Cám ơn bạn rất nhiều

ChipKool_Online

không biết dạo này anh Dũng đi đâu rồi mà không thấy anh chém gió nhỉ?nhiều người hỏi anh thủ thuật tạo khung tìm kiếm giống như trang của anh đó

VnAbout

Fandung ơi cho mình copy và post trên blog của mình nhé, đảm bảo sự tôn trọng quyền tác giả của Dũng là điều đầu tiên cần thực hiện .

quang viet

http://www.vankiep123.com/

Nguyễn Doãn Đức

Good!
Cảm ơn vì đã chia sẻ thủ thuật
Cho mình xin nhá :X
À tiện cho mình hỏi thêm là Blog FD có trao đổi link nữa không. Nếu có thì yêu cầu là gì?

Lê Phổ Hoàng Khang

Làm sao chỉnh font chữ trong dòng thông báo to hơn, in đậm hoặc nghiêng... và có thể tô màu giống như thông báo của bạn vậy Dũng.

Mình ko rành lắm, ngồi mò quài ko ra, bạn chỉ giúp mình cái nhan, thanks alot.

Phan Dũng

@Lê Phổ Hoàng Khang : đây là các thẻ cơ bản của HTML mà bạn, nếu bạn không rõ thì mình hướng dẫn sơ :
- muốn chữ đậm thì bạn bỏ nó vào thẻ <b>
ví dụ :
<b>{Nội dung đoạn TEXT}</b>
- chứ in nghiêng thì bạn dùng thẻ <i>
ví dụ :
<i>{Nội dung đoạn TEXT}</i>
- nếu muốn chữ có kích thước lớn thì bạn dùng thẻ <span> như bên dưới :
lt;span style="font-size:13px;">{Nội dung đoạn TEXT}</span>

Phan Dũng

àh quên nữa, muốn chữ to thì bạn thay đổi giá trị 13px thành số lớn hơn, ví dụ 16px

ps: làm biếng viết lại comment. nên trả lời thêm cái khác

truong9x

mình mới làm cái này nhưng sao mình để bên http://www.ibasictips.blogspot.com lại hiển thị được mà khi mình đã mua tên miền http://www.ibasictips.com/ lại ko hiển thị được nữa vậy bạn.mình đã xóa đi và làm lại từ đầu nhưng vẫn ko đc.mong bạn giúp cho.cảm ơn bạn rất nhiều.bài viết của bạn rất bổ ích

truong9x

alo ko trả lời giùm mình mới

Ghost VN

Cám ơn bạn nhièu nha

Admin

thanks ban

Cảm Nhận Blog

hay undefined cảm ơn nhá



☺ 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