Khung thông báo cho blog

/
Notification Box for Blogger
Đôi khi bạn muốn thông báo cho các độc giả của blog mình về một sự kiện nào đó (ví dụ như chuyển domain hoặc đăng kí nhận tin...) thì việc tạo một Notification Box là cần thiết. Có nhiều cách để làm điều này, ở đây mình giới thiệu một ứng dụng nhỏ của Jquery trong việc tạo khung thông báo. Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn.

Chèn đoạn code sau phía trên </body> trong template:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url(https://lh5.googleusercontent.com/_U0QaeycS3vw/Taqu74WricI/AAAAAAAAAkE/eEcZwcRj0ko/close.png) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://lh3.googleusercontent.com/_U0QaeycS3vw/Taqu7wyV6rI/AAAAAAAAAkI/726O1B0-O94/warning.png);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>Đây là một thông báo. Click vào button ở bên phải để tắt.</p></div></b:if>

Những đoạn được đánh dấu màu đỏ bạn có thể chỉnh sửa cho phù hợp. Khung này theo mặc định chỉ hiển thị ở trang chủ.

- Nếu đang sử dụng một thủ thuật Jquery khác, hãy xóa dòng màu xanh để tránh xung đột.
- Khung thông báo này có thể ứng dụng vào nhiều việc khác, ví dụ như nội qui comment, nhưng cần một kiến thức nhất định về CSS.
Add a Comment

58 comments

ohh, trông mấy khung này bắt mắt nhờ

4/17/2011 comment-delete

Đẹp lắm, khi nào cần qua bác lấy :D
Mà dạo này em đang băn khoăn không biết có nên tiếp tục hỗ trợ IE6 nữa k, rồi mấy hiệu ứng bo góc, shadow cho FF, webkit không phải câu lệnh chuẩn của CSS. Tạm thời ném cái histats thống kê xem số lượng dùng IE6 là bao nhiêu b-(

4/17/2011 comment-delete

:D Đẹp thật! Nhưng lại thêm 1 (http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js) Thì.... :-o

4/17/2011 comment-delete

@Duy Pham : Ý hay đó :D
Riêng Blog này thì chỉ 7% visitor sử dụng IE các loại. Cứ tưởng IE9 hiển thị CSS3 ngon ai dè bật blog mình lên thấy chả khác gì IE8, lạy anh Microsoft.

4/17/2011 comment-delete

Quốc Vịnh: bạn dùng Dial-up hả @-)

4/17/2011 comment-delete

@DuyPham : Site mình người dùng IE chiếm tới 16%, một con số không nhỏ tí nào. Tuy nhiên IE6 thì miễn sao bố cục đừng "nhảy lung tung" là OK rồi.

@Noct : tiện ích này hay lắm, có thay đổi gì mới dùng cái này rất tuyệt !

4/17/2011 comment-delete

@iTechPlus: sao comment của bác cứ vào spam box thế nhở, mình cũng chưa từng block cái comment nào của ItechPlus :-o

4/17/2011 comment-delete

Cái này khá là độc chiêu. Thanks bác Noct!

4/18/2011 comment-delete

Nếu muốn nó hiện ở một bài viết nhất điịnh thì làm thế nào hả Noct?

Thì sửa dòng đầu tiên thành <b:if cond='data:blog.url == "URL trang bất kì"'>

4/18/2011 comment-delete

Mình làm được rồi. Cảm ơn Noct!

@Noct : lạ nhỉ, site mình nhiều chuyên mục để chăm lo nên đâu còn thời gian mà đi spam:( Để nhớ lại xem có "gây thù chuốc oán" gì với bác Gutồ không nào:D

4/18/2011 comment-delete

Lại thêm một thủ thuật hay áp dụng cái đã rồi đi spam sau ... hì hì hì

@Noct : Mình dùng google code. Thủ thuật này hay và đẹp thật. Dúng cái mình cần. Cảm ơn nhé!

4/19/2011 comment-delete

xin hỏi, bên wwordpress làm được ko? hoặc có plugin nào như vạy ko nhỉ?

4/20/2011 comment-delete

Bên WP thì mình không rành lắm, nhưng có một plugin với chức năng như trên mà bạn có thể tham khảo là WordPress Notification Message Plugin

4/20/2011 comment-delete

Bài viết khá ấn tượng

tuyệt wá àh! cám ơn bạn nhiều nha!

4/24/2011 comment-delete

Bác chủ cho em mã màu và ảnh của Success Notification, hoặc toàn bộ cũng được

4/25/2011 comment-delete

Cậu là ai ? Cậu biết cách lách luật thật đấy, quẳng đại cái URL nào đó vào là được comment. Nhưng không có hy vọng là sẽ được đáp ứng yêu cầu.

4/25/2011 comment-delete

" Cậu là ai ? Cậu biết cách lách luật thật đấy, quẳng đại cái URL nào đó vào là được comment. Nhưng không có hy vọng là sẽ được đáp ứng yêu cầu. "
là sao ?

@Kệ Sách Nhỏ : tôi đang nói cái cậu Hunter, đặt ra qui định comment như vậy là để tránh các đối tượng ẩn danh. Nếu khóa hoàn toàn chức năng chọn Tên/URL thì lại gây phiền toái cho một số người. Thế mà cậu này lại chọn URL là Google rồi vào đây đặt yêu cầu, khác nào ẩn danh ? Trước khi yêu cầu điều gì đó thì phải cho tôi biết bạn là ai, bạn đến từ đâu, đó là phép lịch sự tối thiểu.

4/25/2011 comment-delete

Bác Noct cho em chém gió cái nhé b-( E đang say đây :-ss

4/25/2011 comment-delete

What 'say' :-o
Nhậu nhẹt à :->

4/25/2011 comment-delete

Cho mình hỏi cái khung:
"Nếu đang sử dụng một thủ thuật Jquery khác, hãy xóa dòng màu xanh để tránh xung đột.
- Khung thông báo này có thể ứng dụng vào nhiều việc khác, ví dụ như nội qui comment, nhưng cần một kiến thức nhất định về CSS."
Là thủ thuật nào thế Noct?

4/26/2011 comment-delete

@Noct : Không biết ổng có làm điều gì bậy k ;))

4/26/2011 comment-delete

Thủ thuật nào mà có dùng cái jquery.js thì gọi là thủ thuật jquery :D

4/26/2011 comment-delete

thay vì chèn một thông báo mà áp dụng để hiển thị ads quảng cáo cũng được Noct nhỉ?

4/29/2011 comment-delete

À noct à hướng dẫn mình thay cái dòng đăng nhận xét thành cái buttons giống Noct đi

4/29/2011 comment-delete

@Rùa Biển : Được chứ bác, nhưng phải có tay nghề code chút mới chèn ad sao cho nó đẹp :D

4/29/2011 comment-delete

anh ơi làm sao làm được
cái khung ''Comment sẽ bị xóa nếu'' như của anh vậy

5/28/2011 comment-delete
5/28/2011 comment-delete

Thank anh noct nhiều nhé ^^

Hay quá.............

6/20/2011 comment-delete

Đã áp dụng bên blog của em. Bác Noct gắn liên kết cho em với nha, em đang xài thử Mazinseo của Tiến! http://english123.tk :)

6/25/2011 comment-delete

Nếu bác có blog thủ thuật hoặc IT thì mình sẵn sàng liên kết nhưng blog học ngoại ngữ thì :-ss
Tuy đau lòng nhưng đành phải từ chối :((

6/25/2011 comment-delete

Anh Noct ơi, cho em hỏi, Em xóa dòng xanh kia rồi như khi Click vào button ở bên phải để tắt thì lại không tắt được, làm sao click mà tắt được bảng thông báo vậy?

VIP
6/28/2011 comment-delete

Thì đừng xóa dòng màu xanh.

6/28/2011 comment-delete

Nhưng không xóa dòng màu xanh thì nó xung đột với một cái Jquery khác. Thế nó mới hiểm!

VIP
6/28/2011 comment-delete

Thế bạn xem demo rồi đếm xem tôi chèn bao nhiêu thủ thuật jQuery ?

Bạn hãy đọc bài giới thiệu về jQuery trên blog này nhé.

6/28/2011 comment-delete

Cám ơn bạn Noct. Mình đọc bài của bạn và đã hiểu về JQuery rồi. Giờ mình không còn bị xung đột nữa. Cám ơn bạn rất rất rất nhiều. Chúc blog của bạn càng ngày càng lớn mạnh hơn nữa!

VIP
6/28/2011 comment-delete

Sao mình chèn rồi nhưng bấm vào nút (X) để close thì không close được là sao vậy bạn

7/03/2011 comment-delete

Có cách nào bấm close được mà không bị xung đột code không bác

7/04/2011 comment-delete

Bạn hãy đọc bài về jQuery trên blog này để biết cách giải quyết.

7/04/2011 comment-delete

Thanks bạn, đã làm được rồi, mình dùng cái thông báo này để mời mọi người để lại Comment tren Blog.

7/07/2011 comment-delete

Không dùng được roài, xóa cả dòng màu xanh đi mà vẫn bị xung đột với cái Slide ảnh giống trang đầu của Blog này - khi chèn Code vào thì cái Slide ảnh nó ngừng luôn. Giúp nhau cái nhé : thanhdnn@gmail.com.

7/15/2011 comment-delete

Bỏ dòng code đi thì không tắt được thông báo.

7/15/2011 comment-delete

Trong cái demo vừa có Slider vừa có thông báo đó bạn, có thể view source để tham khảo.

7/16/2011 comment-delete

Thanks Đúng là thứ Kel đang tìm. Thanks anh Noct !

10/26/2011 comment-delete

Tuyệt! vừa đẹp vừa gọn lại có effect nữa chứ. :x

11/06/2011 comment-delete

@Noct
Cái thằng IE 9 nó hiện thị lỗi tùm lum! Menber của em đang kêu như ngóe!
Em bảo bỏ IE đi xài FF or Chrome.
MS IE9 tệ, thậ tệ.
Blog em chạy trên IE6,7,8, không lỗi, có mỗi thằng IE9 Chuối!
Lạy anh MS(học theo anh!)

ko hiểu sao trong demo có Kwicks Slider, có cả Tab nội dung mà không sao, thế mà blog mình cũng vậy mà lại có xung đột b-(

6/28/2012 comment-delete

Blog mình ở đây nè: http://giveawaysoftprogrammes.blogspot.com/

6/28/2012 comment-delete

đẹp đó, thanks bạn

Ad cho mình hỏi tý :
còn khung thông báo nào hay hơn ko ? mình ko thích warming và màu vàng :(
bạn có cách nào chuyển nó sang bên phải ko ? trong demo nó ở bên trái

8/01/2012 comment-delete

bác ơi, làm sao để chèn link vào đoạn thông báo đó hả bác :P

8/02/2012 comment-delete

cái này dùng cho ASP.NET đc ko bạn? hay chỉ PHP

11/03/2012 comment-delete

Một tiên ích khá hay. Nhưng có lẽ mình sẽ không dùng. Vì mỗi lần dùng sẽ phải can thiệp thẳng vào code :D

11/28/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License