Code đăng bài viết dạng menu thông báo ẩn hiện đầu & cuối trang blogspot

Hôm nay Gia Bảo Blog chia sẻ code tạo Sticky - thông báo có định trên trang đăng bài viết - Sticky được hiển thị nội dung cố định ở vị trí đầu - cuối trang khi xem nội dung trên bài viết blogspot cụ thể  :

Code hiển thị khi kéo đến vị trí cụ thể :

<style>
#stickThis {
    padding: 5px;
    background-color: #ccc;
    font-size: 1.5em;
    width: 300px;
    text-align: center;
    font-weight: bold;
    border: 2px solid #444;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
#stickThis.stick {
    margin-top: 0;
    position: fixed;
    top: 0;
    z-index: 9999;
    -webkit-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

  </style>
 
  <div id="stick-here"></div>
<div id="stickThis">Sticky note</div>

<script>
    function sticktothetop() {
    var window_top = $(window).scrollTop();
    var top = $('#stick-here').offset().top;
    if (window_top > top) {
        $('#stickThis').addClass('stick');
        $('#stick-here').height($('#stickThis').outerHeight());
    } else {
        $('#stickThis').removeClass('stick');
        $('#stick-here').height(0);
    }
}
$(function() {
    $(window).scroll(sticktothetop);
    sticktothetop();
});
</script>

Code Stiky cố định 4 Vị trí trái phải đầu, cuối trang bài viết Blog Spot  :

<!-- Css Float button left, right, top, bottom -->
<style>
.float-contact-phai {
position: fixed;
bottom: 40px;
left: 50%;
z-index: 99999;

</style>
<style>
.float-contact {
position: fixed;
top: 25px;
left: 50%;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
background: #d11a59!important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a, .chat-face a, .hotline a {
font-size: 18px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
}</style>
<!--
Chen code sau duoi style nếu không cho hiển thị tren dien thoai
@media (max-width: 549px){ .float-contact{ display:none }
-->

<!-- Css Float button left, right, top, bottom -->

<!-- Html Float button left, right, top, bottom -->
<div class='float-contact-phai'>
<!-- Code quảng cáo random -->
Cuối trang
  </div>

<div class='float-contact'>
<!-- Code quảng cáo random -->
  Đầu Trang
</div>
<!-- End Html Float button left, right, top, bottom -->   

Code chèn thanh ngang cố định khi scroll chuột  :

<!-- Thanh ngang co dinh khi sroll chuột --> 
<style>
  nav-codinh {
  position: fixed;
  z-index: 500;
  background: orange;
  color: white;
  padding: 2px 0;
  text-align: center;
  width: 100%;
  font-size: 18px;   

</style> 
<nav-codinh>Goghepthanh.com</nav-codinh>
<!-- End Thanh ngang co dinh khi sroll chuột --> 
 

Hiển thị nội dung Cuối trang
Hiển thị nội dung cố định Đầu Trang
Digitalnomad.vn : Thiết Kế Web đa cấu trúc, trải nghiệm viết blog đa nội dung, Koc Content truyền thông cho chính mình, xây dựng hệ thống kiếm tiền tự động online, đa dạng nguồn tài chính từ việc kiến tạo các thu nhập thụ động trên internet. Gia Bảo, Blogger viết vì đam mê, chia sẻ kỹ thuật giúp bạn biến các thiết bị công nghệ kết nối internet, thành cỗ máy MMO khai thác mỏ vàng trực tuyến, các thức giúp chúng ta chạm tay vào 'tự do tài chính'.

Chủ Đề Nổi Bật :


Sponsor

1. thotgo.asia
2. goghepthanh.com
3. dichvuketoannasa.com
4. remcuakimanh.vn