Hướng dẫn tạo quảng cáo cố định khi xem nội dung blogsport Hướng dẫn tạo quảng cáo cố định khi xem nội dung blogsport

Có nhiều cách tạo quảng cáo cố định cho blogsport nhưng hôm nay mình chia sẻ kinh nghiệm của mình cho các bạn

Các bạn có thể xem demo như trang webs này nhé






Việc tạo quảng cáo chạy dọc màn hình này có những thao tác như sau:


Bước 1: Đăng nhập blogspot => Mẫu(Template) ==> Chỉnh sửa HTML
Bước 2: Tìm thẻ đóng </head> rồi thêm đoạn code dưới lên trên nó

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script>
var $stickyHeight = 300;
var $padding = 0;
var $topOffset = 1500;
var $footerHeight = 500;
/* <![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ạn chú ý dòng đầu tiên nhé

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Nếu trong code của các bạn có dòng này rồi thì các bạn xóa nó đi nhé, vì nếu dùng nó hai lần trong code nó sẽ lỗi đó các bạn à, nếu khi cài có lỗi cứ load và vỡ theme thì các bạn cũng xóa nó đi nhé

Các bạn chú ý tiếp các dòng sau:

var $stickyHeight = 300;// Chiều cao quảng cáo
var $padding = 0; // khoảng cách tính từ phí trên của trình duyệt đến quảng cáo
var $topOffset = 1500;// khi kéo quá khoảng này quảng cáo sẽ được đính theo nội dung
var $footerHeight = 500;// khoảng cách từ mép dưới của banner quảng cáo đến chân webs

Các bạn chú ý cân chỉnh kích thước cho hợp lý nhé

Tiếp tục bạn thêm widget HTML với đoạn code như sau nhé

<div id="sticky">
Code quảng cáo của bạn(Bạn có thể đính mã quảng cáo adsense hoặc html hoặc mã ảnh )
</div>

Cuối cùng các bạn lưu lại là ok

P/s: Nếu có khó khăn gì các bạn cứ để lại comment nhé, chúng tôi sẽ giúp bạn, code này ngoài việc đặt trong blogsport còn dùng cho cả website mã nguồn khác các bạn nhé

Chúc các bạn thành công!

Related Posts

Hướng dẫn tạo quảng cáo cố định khi xem nội dung blogsport Hướng dẫn tạo quảng cáo cố định khi xem nội dung blogsport

4/ 5

Oleh hải quế

Pada 10:17:00 Komentar