- Cách 1: Thủ thuật là có điểm dừng ở phần chân (Footer).
- Cách 2: Đặt khoảng cách để tạo điểm dừng ở phần chân cho banner, tức là khi cuộn chuột đến 1 vị trí nào đó của chân blog/web banner này không dính nữa vì nếu dính nó sẽ lấn phần Footer trông không đẹp lắm.
» 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://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery-1.3.2.min.js"></script> <script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/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
<div id="stickybanner" style="text-align:center;"> Banner quảng cáo hay nội dung của bạn </div>
-Lưu ý: bạn nên download File js về TẠI ĐÂY và Upload lên google code để dùng lâu dài.
» 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
» 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://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery-1.3.2.min.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
<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.
Chúc bạn thành công!
Post a Comment
Chú ý:
- Nhận xét nên viết tiếng việt có dấu.
- Cảm ơn bạn đã đọc bài viết tại www.hannavn.com