Thư viện

Trải nghiệm

Thứ Ba, tháng 8 02, 2011

Khung thông báo cho Blogspot

Đô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.

Chia sẻ:
Khung thông báo cho blog
Đô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.
Các bạn hãy xem Demo để thấy rõ hơn.

Xem Demo 

Bạn cũng có thể xem demo ngay trong bài viết này.
Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế (Mẫu)
   3- Chọn Chỉnh sửa HTML

   4- 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 quy comment, nhưng cần một kiến thức nhất định về CSS. nếu không tạo được khung nội quy nhận xét hãy tham khảo BÀI NÀY
Chúc thành công!
(noct.)




Warning!Đây là một thông báo. Click vào button ở bên phải để tắt.

7 nhận xét:

  1. cái xuống hàng đánh thế nào ấy nhỉ để làm cho nó đẹp mắt tí

    Trả lờiXóa
  2. Sao caisdemo tắt đc mà trên blog mình lại ko tắt đc nhỉ

    Trả lờiXóa
  3. @everytime Mình đã Fix lại rùi đó bạn đọc lại nha :3) :3) :3)
    Mình test lại bản Demo chạy vẫn ok mà :3) :3) :3)
    Để xuống dòng bạn đánh vào giữa 2 dòng code <br>
    Ví dụ:
    Tôi <br> yêu em
    sẽ thành
    Tôi
    yêu em

    Chúc thành công :5) :5)

    Trả lờiXóa
  4. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  5. Vào xem hộ cái blog xem có đẹp ko :1)
    À cái chuyển đổi màu như blog này là thế nào vậy http://noct-land.blogspot.com
    Có thì chia sẻ cho mọi người cùng biết chác mình ko sử dụng rồi

    Trả lờiXóa
  6. @everytimeĐẹp đó :1) :1) :1) :1)
    Để mình thử coi sao. Bạn xem bài Auto này trước đi nha :3) :3) :3) :3) :3) Tự động thay đổi hình nền Blogspot theo thời gian.

    Trả lờiXóa