Banner website là
một tiện ích giúp website trở nên chuyên nghiệp và giao diện dễ nhìn. Và đôi
khi bạn sử dụng banner cố định, nhưng cũng đôi khi dùng banner trượt. Hôm nay,
bạn sẽ cùng khám phá hiệu ứng trượt rất đẹp được nhiều trang web tin tức hay
dùng.
 |
Bước 1: Đăng nhập
blogspot à Chỉnh sửa HTML rồi thêm đoạn code sau trước thẻ
<head>:
<script src="http://bachkhoamedia.googlecode.com/files/jquery.min.js"type="text/javascript"></script>
Bước 2: Vào layout à Thêm tiện ích à
HTML/javascript , copy và paste đoạn code bên dưới vào:
<style type='text/css'>
#floatDivWrapper {font-size:11px}
#floatDiv.fixed {position:fixed;top:40px}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){var documentHeight=$(document).height();if(documentHeight>1500){
//$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':30});
var bottomHeight=500;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'>
NHẬP NỘI DUNG HOẶC BANNER MUỐN HIỂN THỊ
</div>
#floatDivWrapper {font-size:11px}
#floatDiv.fixed {position:fixed;top:40px}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){var documentHeight=$(document).height();if(documentHeight>1500){
//$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':30});
var bottomHeight=500;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'>
NHẬP NỘI DUNG HOẶC BANNER MUỐN HIỂN THỊ
</div>
Bấm lưu lại và xem
kết quả.
Chú ý: Bạn có thể
điều chỉnh một vài thông số của hiệu ứng này
- top:40px : Khoảng
cách của banner trượt với lề trên của trang web,thường đặt là 0. Nếu bạn nào có
menu header cố định thì sẽ thay đổi thông số widget cho phù hợp
- documentHeight>1500:
Nếu bài viết dài quá 1500px thì banner sẽ float, còn nhỏ hơn banner sẽ giữ
nguyên
- bottomHeight=500:
Chiều cao tối thiểu mà banner có thể xuống được. Khi cách lè dưới 500px thì banner
sẽ tự động trượt lên
Chúc các bạn thành
công!
Nguồn: www.ikhampha.com
Không có nhận xét nào: