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.

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/AVvXsEjVxhuXt8VWskSOzmGnqgC7ObeG-TfIvXReBiVqy5CnqIn6tAvCimeBDLc0MmYReprb5XT4l280v18IAxe3QQviSKmMwdzt7yTfVFe-rUiwJPLs1xE0Urwj6OIRPqKUQXq5DQ8bO5P5tCU/)

 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/AVvXsEik7lH1fAfxvVQo_YAx9np5rEyZEJToURY43CMm_9ftAlbp7VQ7OPFS3kSY47NCKx3Lkq2ZitnWRIXmDEa2UhstQ0mGUWSlLF6kUhDtdSDVnAmBNEUmGE2Wd6kXbHXHIUlfzudMoMrb_p4/);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ủ.
Bạn có thể tạo khung ghi chú cho blog  TẠI ĐÂY

Chúc thành công!

Theo: noct-land