Có gì mới trên Blog Hiếu WAI?

Cập nhật những thay đổi, cập nhật mới trên Blog Hiếu WAI

BlogTheme VN

Kho theme blogspot miễn phí khổng lồ với hàng trăm giao diện độc đáo.

PLUS Kiến Thức

Chia sẻ tài liệu học tập, khóa học ôn thi THPT quốc gia 2017 - 2018

Quà tặng - WAILOAD Template Blogger

Tặng theme blogspot chuẩn SEO load siêu nhanh thiết kế bởi Hiếu WAI

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

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
Phản Hồi Bạn Đọc

Không có nhận xét nào