2/8/13

Hướng dẫn Tạo banner dính (Sticky banner) với Javascript cho Blogspot

Đăng bởi Admin | 2/8/13 | 0 nhận xét

Tạo banner dính (Sticky banner) với Javascript cho Blogspot  - banner quảng cáo.
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 blogger 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.

Có bao nhiêu cách tùy chỉnh Sticky?

- Ở đây mình chia sẻ 2 cách làm:
  • Style 1: Thủ thuật là có điểm dừng ở phần chân (Footer).
  • Style 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.
Sau đay là Demo cho 2 style: Demo style 1     Demo Style 2

» Tiến hành cài đặt.

» Thủ thuật là có điểm dừng ở phần chân

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced)
4. Tìm thẻ  <head> (Mẹo: bấm Ctrl + F để tìm)
<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- Lưu mẫu lại.
6. Để sử dụng 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

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML) => Tiếp tục (Procced)
4. Tìm thẻ  <head> (Mẹo: bấm Ctrl + F để tìm)
<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>
5- Lưu mẫu lại.
6. Để sử dụng 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="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.
-Lưu ý: bạn nên download File js về và Upload lên google code để dùng lâu dài.


                                                                                                       Theo: Namkna
                                                                                                      Thu thuat vi tinh 

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva