Hôm nay nhân tiện làm cái tiếp thị liên kết cho bên LAZADA, chia sẻ các bạn cách luôn hiển thị quảng cáo khi kéo thanh cuộn website, cái này giống với kiểu hiển thị quảng cáo của admicro mà nhiều admin đã share trên mạng, tuy nhiên nhiều code không hoạt động hoặc không tương thích nhiều trình duyệt, mình post lên đây vừa để lưu trữ thi thoảng sài vừa để cho những bạn chưa biết dễ dàng sử dụng:
Live Demo: xem quảng cáo bên trái 1 bài viết của share123.vn ví dụ link: Tạo quảng cáo trượt dọc 2 bên website
Cơ chế:
Banner sẽ đặt ở cuối cùng của sidebar, khi chưa kéo qua nó, nó sẽ được giữ cố định. Khi khách truy cập vào xem một bài viết tương đối dài, họ sẽ rê chuột qua cái Banner đó và Banner của chúng ta cũng tự động được kéo theo. Quảng cáo sẽ trôi theo chiều dọc sidebar xuống đến phần footer thì sẽ biến mất. Cách bố trí quảng cáo dạng trôi này cũng bù lấp khoảng trống làm cho site của chúng ta trở nên đẹp mắt và "pro" hơn
Các bạn có thể áp dụng cho các widget bám theo sidebar cũng được. Kiểu float này giống kiểu trượt quảng cáo của Admicro mà các bạn có thể gặp ở các trang Vtc.vn, Kenh14.vn hay chính Tua Rua cũng đang áp dụng kiểu quảng cáo dạng trượt này
Tags:
Live Demo: xem quảng cáo bên trái 1 bài viết của share123.vn ví dụ link: Tạo quảng cáo trượt dọc 2 bên website
 |
| Quảng cáo khi chưa kéo thanh cuộn web |
 |
| Quảng cáo khi đã kéo thanh cuộn web |
Banner sẽ đặt ở cuối cùng của sidebar, khi chưa kéo qua nó, nó sẽ được giữ cố định. Khi khách truy cập vào xem một bài viết tương đối dài, họ sẽ rê chuột qua cái Banner đó và Banner của chúng ta cũng tự động được kéo theo. Quảng cáo sẽ trôi theo chiều dọc sidebar xuống đến phần footer thì sẽ biến mất. Cách bố trí quảng cáo dạng trôi này cũng bù lấp khoảng trống làm cho site của chúng ta trở nên đẹp mắt và "pro" hơn
Các bạn có thể áp dụng cho các widget bám theo sidebar cũng được. Kiểu float này giống kiểu trượt quảng cáo của Admicro mà các bạn có thể gặp ở các trang Vtc.vn, Kenh14.vn hay chính Tua Rua cũng đang áp dụng kiểu quảng cáo dạng trượt này
Kiểu quảng cáo này mang lại hiệu quả tối đa và không gây phiền phức cho người đọc, nó đặc biệt hiệu quả đối với những bạn đang chơi google adsen hoặc các quảng CPM trong kiếm tiền onine
Cách làm:
1. Đăng nhập Blogger
2. Vào Mẫu, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
4. Save template lại và mở tab Bố cục => Thêm tiện ích (Nơi bạn muốn chèn quảng cáo )
5. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
Thêm vào đoạn code sau :
Chú ý một số thông số để tuỳ chỉnh :
+ top:30px : Khoảng cách của widget Ads với lề trên của trang web,thường đặt là 0.Nếu bạn nào có menu header cố định thì sẽ thay đổi cho widget dãn xuống phù hợp(bachkhoamedia là 30)
+ documentH>1000 : Thông số này có nghĩa là nếu bài viết của bạn dài quá 1000px thì widget sẽ float, còn nếu bài viết có height nhỏ hơn 1000px thì widget sẽ không float
+bottomHeight=1400 : Thông số này quy định chiều cao tối thiểu mà widget có thể xuống được.Khi cách lè dưới 1400px thì widget sẽ tự động trượt lên trên. Các bạn chỉnh sử thông số này sao cho phù hợp nhất với footer của các bạn.
Cách làm:
1. Đăng nhập Blogger
2. Vào Mẫu, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>Nếu bạn nào trong template đã có file jquery.min.js rồi thì bạn bỏ qua bước 3 này4. Save template lại và mở tab Bố cục => Thêm tiện ích (Nơi bạn muốn chèn quảng cáo )
5. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
Thêm vào đoạn code sau :
<style type='text/css'>
#floatDivWrapper {font-size:11px}
#floatDiv.fixed {position:fixed;top:30px}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){var documentHeight=$(document).height();if(documentHeight>2500){
//$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':30});
var bottomHeight=1200;var msie6=$.browser=='msie'&&$.browser.version<7;if(!msie6){var top=$('#floatDiv').offset().top-parseFloat($('#floatDiv').css('margin-top').replace(/auto/,0));$(window).scroll(function(event){var y=$(this).scrollTop();if(y>=top&&y<=(documentHeight-bottomHeight)){$('#floatDiv').addClass('fixed')}else{$('#floatDiv').removeClass('fixed')}})}}});
//]]></script>
<script type='text/javascript'>//<![CDATA[
var s=true;function doBlink(){$('.blink').css('display',function(index,val){s=!s;return (s)?'block':'none';})}
$(document).ready(function() {setInterval("doBlink()",0)});
//]]></script>
<div class='widget HTML' id='floatDiv'>
Chèn nột dung muốn hiển thị
</div>6.Lưu và xem kết quảChú ý một số thông số để tuỳ chỉnh :
+ top:30px : Khoảng cách của widget Ads với lề trên của trang web,thường đặt là 0.Nếu bạn nào có menu header cố định thì sẽ thay đổi cho widget dãn xuống phù hợp(bachkhoamedia là 30)
+ documentH>1000 : Thông số này có nghĩa là nếu bài viết của bạn dài quá 1000px thì widget sẽ float, còn nếu bài viết có height nhỏ hơn 1000px thì widget sẽ không float
+bottomHeight=1400 : Thông số này quy định chiều cao tối thiểu mà widget có thể xuống được.Khi cách lè dưới 1400px thì widget sẽ tự động trượt lên trên. Các bạn chỉnh sử thông số này sao cho phù hợp nhất với footer của các bạn.
Chúc các bạn thành công !
.jpg)
Không có nhận xét nào: