Hôm nay Namkna chia sẽ cùng các bạn một thủ thuật có thể làm dính (sticky) banner hay một mẫu quảng cáo ở trình duyệt khi bạn cuộn scrollbar chuột trên trang blog
hay web. Khi độ dài của trang bài viết dài hơn cột sidebar thì khi đó
bạn cuộn chuột xuống đến mẫu quảng cáo đó thì chúng sẽ được dính lại ở
trình duyệt. Như vậy chắc bạn đã hình dung được phần nào về công dụng
của thủ thuật này.
Bạn có thể xem demo bên dưới.
Xem DEMO
Ở đây mình chia sẻ 2 cách làm:
- 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!
Theo:dynamicdrive.com - labs.impulsestudios.ca
Hocmarketingonlinemienphi.com
DPCC
HNVN
THU HƯƠNG SHOP
dtn
mnbct
Hải yến
Ý chí kim cương
Hội Từ Thiện Sen Đại Bi
HMKTOL
Lotus
www.baomarketingonline.com
0 nhận xét:
Đăng nhận xét