Thiết kế Khung thông báo cho bloggger/Blogspot

17.4.11 / Được đăng bởi Noct

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

Xem Demo

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij8-lotAnHd6OfevoZ5A8HTi2g5X-q37b-SPxLJ8jpuQvREoZY8GVP2Rn9_GR5Sj5-MQax4rFB7VtClm3h8ysrw03oU2SnUWWPZE1zUmL6Zthx23wDhWyEYQ2Ljno7n2tGtIYT9LL3CPM/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX9hBJrFMCBhE16dLKjV8k0R4V4mCUQcNPUEhpUzf7Ej7MYPUa0O2fBrHsgBJ2y1ARqBnQHFBzggl0h824zrFqgxP06_-S0pVOG74KrjnxhYAb46HYc7VbtRNbM5-He5qER6lQdZXXzyA/);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.

Nếu bạn thích chủ đề này, bạn có thể đăng kí đọc tin RSS, theo dõi trên Twitter, hoặc chia sẻ trên mạng xã hội.

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..