Tạo thanh thông báo dưới màn hình cho blogger

#Thủ Thuật #Windows #Blogger #Facebook

Tạo thanh thông báo dưới màn hình cho blogger

Share:
Chào các bạn, bài viết này mình sẽ hướng dẫn các bạn cách tạo thanh thông báo hiển thị dưới màn hình cho blogger.
Với thanh thông báo này bạn có thể dùng để thông báo cho độc giả một thông tin nào đó mà bạn muốn độc giả chú ý đến.

Hướng dẫn thực hiện

Bước 1: Các bạn truy cập vào trang quản trị blogger và chọn Chủ để => Chỉnh sửa
Bước 2: Các bạn tìm đến thẻ ;]]></b:skin> rồi dán đoạn code sau lên trước nó
.thongbao{z-index:999;position:fixed;bottom:0;right:0;left:0;background:#db3737;width:100%;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:5px;box-sizing:border-box}
.thongbao-text{font-size:18px;margin:0 20px 0 0}
.thongbao-button{display:inline-block;background:#1BA39C;height:25px;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:25px;text-decoration:none;white-space:nowrap}
.thongbao-close{position:absolute;top:50%;right:10px;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%)}
}
Bước 3: Tiếp theo các bạn dán đoạn code bên dưới lên trước thẻ đóng </body>
 <div class='thongbao'>
<div class='thongbao-content'>
<div class='thongbao-text'>
<b>Thông báo <i class="fa fa-arrow-right"></i></b></div>
  <a class='thongbao-button' href='http://www.devnet.vn/dang-ky-ngay/?eant=pluskienthuc' target='_blank'>Click Here</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>
Cuối cùng lưu mẫu lại và xem kết quả đạt được.

Lời kết

Hi vọng với thủ thuật này sẽ giúp ích được cho bạn.
Chúc các bạn thành công!
Nếu bạn gặp phải bất cứ lỗi nào trong quá trình thực hiện hãy để lại comment bên dưới bài viết này mình sẽ hỗ trợ cho bạn.

CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.