Tạo thanh thông báo cực đẹp cho blogspot

Thông tin
Tiêu đề	Tạo thanh thông báo cực đẹp cho blogspot
Chuyên mục	Blogger, Thủ Thuật, Thủ Thuật Blogspot
Định dạng	File PDF
Ngày đăng	18 tháng 5
Lượt xem
Lượt thích

Chào các bạn, hôm nay mình sẽ hướng dẫn đến các bạn cách Tạo thanh thông báo cực đẹp 
cho blogspot. Các bạn có thể thấy demo như trên website của mình.

Cách thực hiện

Đầu tiên các bạn vào Chủ đề > Chỉnh Sửa

Các bạn tìm đến thẻ </body> sau đó thêm đoạn code sau lên trước thẻ </body>

<!-- BEGIN Thông báo -->
<style>
.thongbao{z-index:999;position:fixed;bottom:0;right:0;left:0;background:#9A12B3;width:100%;border-bottom:1px solid #EEEEEE;box-sizing:border-box;transform:translateY(-150%);color:#FFFFFF;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;animation:thongbao-slide-in 0.8s ease forwards}
.thongbao-content{display:flex;align-items:center;flex-direction:row;justify-content:center;width:100%;margin:0 auto;padding:10px 40px;box-sizing:border-box}
.thongbao-text{font-size:20px;margin:0 20px 0 0}
.thongbao-button{display:inline-block;background:#19B5FE;height:30px;border:0;border-radius:2px;box-shadow:0 2px 4px rgba(#000,0.1);padding:0 10px;color:#fff;font-size:15px;font-weight:700;line-height:30px;text-decoration:none;white-space:nowrap}
.thongbao-close{position:absolute;top:50%;right:20px;font-size:20px;font-weight:600;transform:translateY(-50%);cursor:pointer}
.thongbao-button:hover{color:#fff}
@keyframes thongbao-slide-in{
  0%{transform:translateY(-150%)}
  100%{transform:translateY(0%)}
}
</style>
<div class='thongbao'>
<div class='thongbao-content'>
<div class='thongbao-text'>
<b>Tuyển cộng tác viên viết bài cho Website</b></div>
  <a class='thongbao-button' href='/p/dang-ky.html' target='_blank'>Đăng Ký Ngay</a>
  </div>
<div class='thongbao-close'>
<a href='#close' style='color: white;'><i aria-hidden='true' class='fa fa-times'/></a></div>
</div>
<script type='text/javascript'>
//<![CDATA[
jQuery('.thongbao-close').on('click', function() {
  jQuery(this).parent().remove();
});
//]]>
</script>
<!-- END Thông báo -->

Xong rồi các bạn chỉnh sửa lại nội dung các bạn muốn rồi lưu lại là xong.
Nếu bạn muốn thanh thông báo ở trên cùng thì sửa lại chỗ mình bôi màu vàng thành top:0

Tạo thanh thông báo cực đẹp cho blogspot là một trong những bài viết về chủ đề Thủ Thuật Blogspot . Ngoài ra chúng tôi còn rất nhiều bài biết khác về chủ đề này nữa. Hãy tìm thêm cho mình những tài liệu khác nữa để nâng cao kiến thức nhé!

Báo link hỏng