Menu

Tạo sticky sidebar widget trượt dọc cố định cho blogspot trong 5 phút

Khi vào trang web lớn, các bạn sẽ thấy một kiểu quảng cáo hoặc widget hai bên chạy dọc theo màn hình, đó sticky sidebar, bài này mình sẽ chia sẻ Code Sidebar trượt dọc theo màn hình cho Blogspot, Tạo Widget cố định - Sticky Widget trượt dọc trên Blogger.

Lợi ích của sticky sidebar widget trượt dọc

Hiển thị cho khách truy cập trong suốt và do đó thu hút khách truy cập đối với nó. Nhận được nhiều ấn tượng hơn nhìn blog của bạn chuyên nghiệp hơn. Nó sẽ thu hút nhiều nhấp chuột hơn. Lượt xem trang có thể tăng lên và nhiều hơn nữa. Doanh số / chuyển đổi của bạn có thể tăng lên.
Tạo sticky sidebar widget trượt dọc cố định cho blogspot trong 5 phút

Bước 1: thêm đoạn code sticky sidebar widget trượt dọc cố định vào teamplate

Vào Chủ Đề --> Chỉnh sửa HTML
Sao chép mã bên dưới và dán mã ngay phía trên thẻ </ body>.

Ví dụ trong đoạn code này mình chỉ cho widget - tiện ích. widgetId=PopularPosts1 (bài viết xem nhiều)

Dán mã ngay phía trên thẻ     </ body>   nhé

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'> //<![CDATA[ $(function() { if ($('#PopularPosts1').length) { var el = $('#PopularPosts1'); var stickyTop = $('#PopularPosts1').offset().top; var stickyHeight = $('#PopularPosts1').height(); $(window).scroll(function() { var limit = $('#footerID').offset().top - stickyHeight - 20; var windowTop = $(window).scrollTop(); if (stickyTop < windowTop) { el.css({ position: 'fixed', top: 20 }); } else {el.css('position', 'static'); } if (limit < windowTop) { var diff = limit - windowTop; el.css({top: diff }); } }); } }); //]]> </script>


Một điều bạn cần lưu ý ở đây là, nếu blog của bạn đã có ajax.googleapis.com thì hãy xóa dòng đầu tiên này  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>  ,nếu không nó sẽ không hoạt động.
Đảm bảo thay thế bằng ID widget PopularPosts1 thành widget bạn muốn nó trượt.

Bây giờ hãy lưu mẫu và xem liệu widget có hoạt động hay không. Kiểm tra nó trên cả máy tính và điện thoại di động.

Bước 2 chỉnh sửa css cho sticky sidebar trượt dọc

Trong một số mẫu teamplate blogspot có thể tạo ra sự cố trong chế độ xem trên thiết bị di động, vì vậy để khắc phục, bạn cần thêm một số mã để ẩn tiện ích nổi khỏi chế độ xem trên thiết bị di động.

Tìm kiếm    ]]></b:skin>     và sau đó dán mã bên dưới vào ngay phía trên    ]]></b:skin>  .

#PopularPosts1 {chiều rộng: 100%; chiều rộng tối đa: 320px }
@media screen and (max-width:680px){
#PopularPosts1{display: none}}

Lưu mẫu lại và ra trang chủ blog của bạn kiểm tra nhé, chúc bạn thành công.

Bình luận ý kiến của bạn

0 Comments