11:17
Rurutomi Vanduc
» Bắt đầu thủ thuật
» Thủ thuật không có điểm dừng ở Footer
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js"></script>
<script src="http://data-traidatmui.appspot.com/scripts/stickycontent.js"></script>
<script>
jQuery(document).ready(function($){
$('#stickybanner').stickyit({
gap: 5,
stickyclass: "docked"
})
})
</script>
5. Bây giờ bạn chỉ việc thêm banner quảng cáo vào giữa thẻ DIV như bên dưới là xong<script src="http://data-traidatmui.appspot.com/scripts/stickycontent.js"></script>
<script>
jQuery(document).ready(function($){
$('#stickybanner').stickyit({
gap: 5,
stickyclass: "docked"
})
})
</script>
<div id="stickybanner" style="text-align:center;">
Banner quảng cáo hay nội dung của bạn
</div>
Banner quảng cáo hay nội dung của bạn
</div>
» Thủ thuật có điểm dừng ở Footer
Bạn thực hiện như các bước trên tuy nhiên đến bước 4 bạn thay thành code bên dưới
<style>
#sticky {
height:600px; /* chiều cao của banner quảng cáo*/
width:300px; /* độ rộng của banner quảng cáo*/
position:relative;
}
</style>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js"></script>
<script>
var $stickyHeight = 600; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 500; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 236; // Định vị điểm dừng của banner, tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
Bây giờ bạn chèn code quảng cáo vào giữa thẻ DIV như bên dưới#sticky {
height:600px; /* chiều cao của banner quảng cáo*/
width:300px; /* độ rộng của banner quảng cáo*/
position:relative;
}
</style>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js"></script>
<script>
var $stickyHeight = 600; // chiều cao của banner quảng cáo
var $padding = 5; // khoảng cách top của banner khi dính
var $topOffset = 500; // khoảng cách từ top của banner khi bắt đầu dính (tức là khoảng cách tính từ trên xuống đến vị trí đặt banner )
var $footerHeight = 236; // Định vị điểm dừng của banner, tính từ chân lên
/* <![CDATA[ */
function scrollSticky(){
if($(window).height() >= $stickyHeight) {
var aOffset = $('#sticky').offset();
if($(document).height() - $footerHeight - $padding < $(window).scrollTop() + $stickyHeight) {
var $top = $(document).height() - $stickyHeight - $footerHeight - $padding - 185;
$('#sticky').attr('style', 'position:absolute; top:'+$top+'px;');
}else if($(window).scrollTop() + $padding > $topOffset) {
$('#sticky').attr('style', 'position:fixed; top:'+$padding+'px;');
}else{
$('#sticky').attr('style', 'position:relative;');
}
}
}
$(window).scroll(function(){
scrollSticky();
});
/* ]]> */
</script>
<div id="sticky">
Code quảng cáo, banner hay nội dung của bạn
</div>
Như vậy là xong, việc dùng thủ thuật 1 hay 2 thì nó cũng điều có cái ưu và nhược điểm. Thủ thuật 1 bạn không cần canh khoảng cách top mà nó tự động dính khi cuộn chuột đến banner đó, nhưng nhược điểm không có điểm dừng ở chân, còn thủ thuật 2 thì ngược lại.Code quảng cáo, banner hay nội dung của bạn
</div>
Chúc bạn thành công!
Nguồn: Traidatmui.com
Bài viết liên quan : Nhãn : Thủ thuật Blogspot
Posted in: Thủ thuật Blogspot
3 nhận xét:
Chào bạn, mình làm theo cách thứ 2, mình đặt cách footer 20px thì dừng lại, nhưng thay vì dừng lại nó lại biến mất, bạn giúp mình với
Sao mình làm trên Infographic's BLOG mãi mà không đc thế này!!! :((
tao banner truc tuyen dính là như nào
Đăng nhận xét