Thêm Tiện Ích Thông Báo Cho Blogger (BlogSpot)

        Đôi khi một Blogger muốn thông báo với khách điều gì đó, nhưng không biết kết hợp như thế nào để hợp với Blog của bạn. Vì vậy hôm nay, mình sẽ hướng dẫn các bạn Thêm Tiện Ích Thông Báo Cho Blogger (BlogSpot) rất đơn giản và hiệu quả, cũng có ích với các bạn một phần nào.

Thêm Tiện Ích Thông Báo Cho Blogger (BlogSpot)

   Cách tiến hành:

Bước 1: Các bạn Copy toàn bộ Code dưới đây và đặt nó trên thẻ </body> trong Chỉnh Sửa Mẫu.

 <!-- Thông báo by Admin Hiếu-->
<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/AVvXsEg3xTFYHldV0FRyikj0FzwKbEMwEAgg8arKZ_tXC-sbgkwr7VtvlNkraCL9Ky_-aAVQ0GZDfVK6jB-SEL7KtGBXOXCgXdG4zCdlj3EdVE8so_m2uDNg-Us1HtJcI3VjZ7anyypkYzb8xdM/) 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/AVvXsEht6XDTmQLDH4Ppx3AMyRDttXKqS7juOlLOf8wMQBNlTdoUOqaY1XeLDQNKrAwvwE5fPR8aGmVX-Dm2IT1SQviLjHymkJOzQCqKG-R7OZLbvwt83NLPS3vOSuEIQpEvtyNlFJpVo4JpOpQ/);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>Thông Báo!</strong>Blog đã mở lại tính năng copy, mong quý khách copy đúng cách, tôn trọng tác giả. Thân !!! </p></div></b:if>

Bước 2: Các bạn chỉnh sửa lại thông báo trong phần chữ màu đỏ của phần code trên.
Bước 3: Lưu lại và tận hưởng kết quả.
Các bạn có thể xem DEMO tại đây.

Demo

See the Pen Tiện ích Thông Báo by Kiing Doom (@quochieu823) on CodePen.

Có lẽ bạn thích?