"Thủ thuật tạo banner dính (Sticky banner) với Javascript cho Blogspot"

Traidatmui.com – Bài viết hôm nay mình 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 chuột trên trang blog hay web. Nói vậy thật khó hình dung được đúng không? Như bạn thấy ở trang dantri.com.vn có mẫu quảng cáo AdMicro - AdMarket cuối cùng khi bạn xem một bài viết nào đó và trang xaluan.com cũng có mẫu quảng cáo cuối cùng cũng tương tự. 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, bây giờ mình sẽ chia sẻ cùng các bạn chi tiết bên dưới. Ở đây mình chia sẻ 2 cách làm, 1 thủ thuật là có điểm dừng ở phần chân (footer), 1 cái sẽ đặ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://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
<div id="stickybanner" style="text-align:center;">

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
<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

Tham khảo dynamicdrive.com
labs.impulsestudios.ca

Xem khác cùng chủ đề

16 nhận xét | Viết lời bình

12/12/2011 06:33:00 SA Trả lời

Được bạn giúp đỡ, mình đã tạo được thanh menu ngang cho blog. Nhưng không hiểu sao bây giờ nó nhìn không được rõ ... hơi khó miêu tả (bạn vào trang của mình nhìn nhé http://vahanamok.blogspot.com
Bạn có thể chỉ cho mình cách khắc phục lỗi này không ? Rất mong sớm nhận được mail của bạn. Nếu không phiền bạn gửi mail cho mình theo: vahanamok@gmail.com nhé. Xin chân thành cảm ơn !

Admin
12/14/2011 12:41:00 SA Trả lời

@ Nguyễn Văn Va: Đó là do bạn chỉnh màu chữ và màu nền không phù hợp, bạn có thể chỉnh sửa màu nền (background) ở phần .parent-menu { lại cho phù hợp nhé.

Bạn nên comment ngay bài viết mà bạn thắc mắc để dễ theo dõi việc trả lời nhé bạn

12/14/2011 02:02:00 SA Trả lời

Ý bạn là phần ".parent-menu {" ởtrong phần cài đặt blog hay trong file .Js mà bạn đã gửi cho mình nhỉ ?

Admin
12/23/2011 06:10:00 SA Trả lời

@ Nguyễn Văn Va:Do bạn comment không đúng bài viết nên hơi khó hiểu. Đó là phần .parent-menu { trong css đó bạn, bạn xem lại bài viết tại đây

1/02/2012 06:39:00 CH Trả lời

quá hay cảm ơn admin nhiều

6/12/2012 01:06:00 SA Trả lời

Cám ơn nhiều

8/19/2012 08:01:00 CH Trả lời

bn oi minh muon lam ca'i dau trang blog cua minh nhu buonqua.org thi lam the nao! giup minh vs! co the chat vs minh qua tuyetchanthat_timem
blog cua minh la ds2h.blogspot.com

2/03/2013 02:11:00 SA Trả lời

Bạn ơi. Mình add code vào cả 2 banner 2 bên của mình. nhưng chỉ có 1 cái dính lại còn 1 cái không được. vậy phải làm sao? Tks bạn trước

2/03/2013 02:23:00 SA Trả lời

Ah, mình coppy thêm code rồi sửa chữ stick banner thành stick banner1 thì thấy ok. Nhưng sợ nhiều script quá có nặng web ko bạn.=})

Admin
2/03/2013 04:19:00 CH Trả lời

Nếu bạn sử dụng code 1 thì chỉ cần chỉnh sửa script
[code]<script>
jQuery(document).ready(function($){
$('#stickybanner').stickyit({
gap: 5,
stickyclass: "docked"
})

$('#stickybanner2').stickyit({
gap: 5,
stickyclass: "docked"
})

})
</script>[/code]

Và phần HTML bạn chỉnh lại

[code]<div id="stickybanner" style="text-align:center;">

Banner quảng cáo hay nội dung của bạn

</div>

<div id="stickybanner2" style="text-align:center;">

Banner quảng cáo hay nội dung của bạn

</div>[/code]

2/22/2013 12:31:00 SA Trả lời

Tks bạn nhiều nhé, mình làm được rồi :D. Nhân tiện cho mình hỏi chỉnh code làm sao để banner nó đứng im một chỗ khi mình cuộn trang (như 2 quảng cáo 2 bên của bạn ấy), mình gà về code lắm không biết chỉnh sao :(

Admin
2/22/2013 01:43:00 SA Trả lời

Bạn tìm hiểu về thuộc tính position để biết cách viết cấu trúc css của nó.

8/25/2014 03:18:00 CH Trả lời

Áp dụng code thứ 2 chạy ngon lành (Blog nhìn chuyên nghiệp hơn), nhưng làm liệt menu chính luôn, chúng không sổ xuông được nữa => xung đột jquery rồi sửa hoài không được. Bác Traidatmui có cao kiến gì giúp em với Vetshop VN. Em đoán là do xung đột gì rồi sửa hoài không được. Khi rảnh anh nghiên cứu giúp dùm em.

Admin
8/25/2014 08:02:00 CH Trả lời

Nếu trong blog bạn đã có JQuery rồi thì bạn không cần thêm http://data-traidatmui.appspot.com/scripts/Jquery1.3.2.js

8/26/2014 04:48:00 SA Trả lời
Nhận xét này đã bị tác giả xóa.
Admin
8/26/2014 09:02:00 CH Trả lời

Bạn kiểm tra lại xem có thể do nó bị xung đột Jquery đấy.

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang