Mình đã từng giới thiệu một code làm cho ảnh đẹp hay banner trượt theo blog nhưng hôm nay mình sẽ giới thiệu một thủ thuật giúp một widget bất kỳ trượt theo blog, 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ỹ của footer.
» Cài đặt jquery cho blog của bạn
Bước 1: Vào blogger → Mẫu (template) → Chỉnh sửa HTML (Edit HTML)
Bước 2: Chèn đoạn code bên dưới vào ngay sau thẻ mở <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>
Nếu template của bạn cài jquery rồi thì bỏ qua bước này để tránh xung đột code.
» Thêm widget trượt dọc 2 bên blog
Vào blogger → Bố cục (Layout) → 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>
#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ư bên dưới :
- top:0px: Khoảng cách của widget đến lề trên khi di trượt dọc.
- documentHeight>2500: Nếu bài viết dài quá 2500px thì widget mới trượt dọc.
- bottomHeight=1200: Cách bottom 1200px widget sẽ tự động chạy lên phía trên.
- Nội dung của widget đây là phần chứa những gì bạn muốn trược dọc, đó có thể là một bức ảnh, một đoạn thông báo hay bất cứ thứ gì khác bạn muốn trượt dọc như sticky,
Chia sẻ bài viết lên facebook !
0 comments:
Post a Comment