Khung Thông Báo Cho Blog (Style 2 )

™» CGC  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 Boxlà 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/AVvXsEgnYwD9f7_ppBsqQxYK1PN3QMdirn1MuxAAH_WDA4eNiLANxJsiat5kuu5QIt1Hordx0HsU66SNcmQ1SgPu1U91xnExUbzEC6v3ltm783ypkKazs2Zdl1pTTkB28V53_9X-pLVm4bc96b4/)  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/AVvXsEhzzB5MzmnYCwvaXZBeWFFZjm8rYF2ul1VxZRK9lpUDeo_icWuOxZlsN1-RvsXXwWQoIU7i35uzhiSqw2nHBa1cAfWnml-NSGKsVmuDZdgmgdgJaGHMB9x1njawWOy34P9oBmMQLABfhlU/);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ủ.


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


Nguồn : thuthuatiphone.tk
Tổng hợp : Hội Thánh Cây Giang 
Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!