Tạo thanh thông báo bên dưới blog

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 

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait