.Bài viết KTĐN
Cô tôi
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 HTMLBướ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'>Bạn có thể tùy chỉnh cho widget như sau:
#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>
- 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
Không có nhận xét nào:
Đăng nhận xét
Những người bạn