Cảm nhận tư duy và tổng hợp kiến thức

Thứ Năm, 26 tháng 11, 2015

Tạo Floating banner (Quảng cáo trượt) cho Blog và website

Hôm nay mình sẽ hướng dẫn các bạn tạo quảng cáo trượt (floating banner), một trong những loại hình banner được ưa thích của các admin cũng như của khách hàng bởi tính hiệu quả cao của nó.

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  đang áp dụng kiểu quảng cáo dạng trượt này. 

Hướng dẫn làm quảng cáo Float trên sidebar theo chiều xem trang của khách truy cập

  • 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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'"type="text/javascript">
</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ày
  • 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 :

<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 !
Nguồn chép:
http://htrin.blogspot.com/
Socializer Widget by Nguyen D. Khanh
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé.

Share:
LIKE and Share this article: :

0 Comments:

Đăng nhận xét

More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa



Thống kê Blogspot

Lưu trữ Blog

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP