Thứ Năm, 7 tháng 2, 2019

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    
                                                  Nguồn : Hiếu Wai                               

Subscribe box

Nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được bài viết mới nhất từ KHÁNH BLOG hoàn toàn miễn phí qua Gmail!

3 nhận xét: