Trước đây mình đã giới thiệu một code làm cho widget trượt theo blog nhưng không có giới hạn nhưng hôm nay mình sẽ giới thiệu một thủ thuật giúp cho khi widget cách bottom một khoảng cách nhất định sẽ tự động trượt lên để không làm ảnh hưởng về mặt thẩm mỹ cho footer
Cài đặt jquery cho blog
Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML Bước 2: Chèn đoạn code bên dưới vào sau thẻ <head> rồi lưu lại template<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
Thêm widget chạy dọc theo blog
Vào blogger → Bố cục → Thêm widget HTML/Javascript mới vào vị trí bạn muốn sau đó dán code sau vào phần nội dung rồi lưu lại<style type='text/css'> #floatDivWrapper {font-size:11px} #floatDiv.fixed {position:fixed;top:0px} </style> <script type='text/javascript'>//<![CDATA[ $(document).ready(function(){var documentHeight=$(document).height();if(documentHeight>2500){ //$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':30}); var bottomHeight=1200;var msie6=$.browser=='msie'&&$.browser.version<7;if(!msie6){var top=$('#floatDiv').offset().top-parseFloat($('#floatDiv').css('margin-top').replace(/auto/,0));$(window).scroll(function(event){var y=$(this).scrollTop();if(y>=top&&y<=(documentHeight-bottomHeight)){$('#floatDiv').addClass('fixed')}else{$('#floatDiv').removeClass('fixed')}})}}}); //]]></script> <script type='text/javascript'>//<![CDATA[ var s=true;function doBlink(){$('.blink').css('display',function(index,val){s=!s;return (s)?'block':'none';})} $(document).ready(function() {setInterval("doBlink()",0)}); //]]></script> <div class='widget HTML' id='floatDiv'> Nội dung của widget </div>Bạn có thể tùy chỉnh cho widget như sau:
- top:0px: Khoảng cách của widget đến lề trên khi di chuyển dọc
- documentHeight>2500: Nếu bài viết dài quá 2500px thì widget mới chạy dọc
- bottomHeight=1200: Cách bottom 1200px widget sẽ tự động chạy lên trên
Nguồn Internet
Thank bạn vì bài viết bổ ích này
Trả lờiXóaMình có vấn đề khi thực hiện mong bạn giúp đỡ.
Bạn có thể gửi cho mình một demo cụ thể không
Vì mình mới làm quen jquery nên không rành lám
nếu dược bạn gửi vào mail mình nhé
anhluong6677@gmail.com
Thank a lot
Mã hóa code đưa vào comments