Khung thông báo hiển thị ngoài trang chủ nằm bên góc trái/phải cho Blogspot

Bài viết trước Tho Android đã chia sẻ cách để Thêm bài đăng nổi bật xếp hạng 5 Sao cho Blogspot. Tiếp theo Serial về Thủ Thuật Blogspot, blog sẽ chia sẻ cách để thêm tiện ích Khung thông báo hiển thị ngoài trang chủ nằm bên góc trái/phải nhằm thông báo cho các thành viên biết có sự kiện nào đó đang diễn ra hoặc bạn muốn thông báo về 1 quy định mới,... trên Blog. Bây giờ chúng ta sẽ tiến hành làm:

☼ Đối với Blogger:

+Bước 1: Bạn vào https://www.blogger.com

+Bước 2: Sau đó ở trang chủ Chọn Mẫu , nhấp chọn Chủ đề và chọn Chỉnh sửa HTML 

+Bước 3: Bạn Ctrl + F tìm kiếm thẻ đóng  </body>

+Bước 4: Bạn chèn đoạn code bên dưới nằm trước thẻ </body>

<!-- css hiển thị tiện ích -->
<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/AVvXsEjXmuMStonLvp4ED2lISGgxfuWA_pr-R6IlxvF8tXvRtK28zyKcgkXsCDAiR7zpRHsJiV8chfinLCX_GF5uu1nZkC0bmPI_yY4wTLtjBm4MZhT5EVfcOnusYoaNRqUO3POh7qxZp6mtpTw/) 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/AVvXsEjPlcR5NYcY-a6l0TW62-TnDCUomnyF2ZsHB65qPuj3pjvctpRC1hX6BkTJuWc0ZYiTlH6fzjfqEbmcpYL79fMhdvupF08ES42rPw_KqLHkhyiU89NQPH88repBnRqQOPVtgDEQcVMJMA8/);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>Chú ý!</strong>Đây là nơi để ghi thông báo. Click vào dấu X ở bên phải để tắt.</p></div></b:if>
<!-- code sưu tầm từ internet -->

☼ Lưu ý: 
    + Dòng màu đỏ: là kích thước chiều ngang và chiều cao của khung. Bạn có thể chỉnh sửa phù hợp với mục đích của mình
   + Dòng màu tím: là vị trí của khung. Hiện tại là ở phía bên trái là left.
   + Dòng màu xanh: là Jquery. Nếu mẫu template của bạn có Jquery rồi hãy bỏ dòng đó để tránh xung đột.
   + Dòng màu tím đậm: là câu thông báo hiển thị trên khung.
       Cách kiểm tra  Jquery, bạn vào mẫu bấm Ctrl + F, tìm Jquery, nếu có nó sẽ hiển thị ra.
☼ Lưu lại là thành công bạn nhé !