Khi bài viết dài,banner sẽ tự động trượt dọc theo sidebar bám lấy bài viết và sẽ bù lấp lại khoảng trống do bài viết tạo ra.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 Bachkhoamedia cũng đang áp dụng kiểu quảng cáo dạng trượt này.Quảng cáo sẽ trôi theo header xuống đến phần footer thì sẽ 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 ...........
Sau đây là cách thực hiện
1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào sau thẻ <head> (nếu blog đã có file jquery.min.js thì bỏ qua bước này)<script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js " type="text/javascript"></script>
4. Save template lại và trở về phần tử trang
5. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
<style type='text/css'>
#floatDivWrapper {font-size:11px}
#floatDiv.fixed {position:fixed;top:5px}
</style>
<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()",200)});
//]]></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){var documentH=$(document).height();if(documentH>1000){
//$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':0});
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<=(documentH-bottomHeight)){$('#floatDiv').addClass('fixed')}else{$('#floatDiv').removeClass('fixed')}})}}});
//]]></script>
<div id="floatDiv">
<div align="center">
<div style="border: #ccc 1px solid; margin: 1px; padding: 5px; text-align: justify; width: 287px;">
<div style="text-align: justify;">
<div style="text-align: center;">
<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b>
</b></span>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: blue; font-family: Arial, Helvetica, sans-serif;"><b><a href="http://www.dvt.com.vn/2012/03/ban-sim-so-ep-tren-ia-ban-tinh-ha-nam.html/" target="_blank" title="SIM SỐ TRÊN ĐỊA BÀN HÀ NAM"><img border="0" height="180" src="https://dl.dropbox.com/u/74775294/anh/quangcao.png" width="287" /></a></b></span></div>
</div>
</div>
Lưu và xem kết quả
Chú ý một số thông số để tuỳ chỉnh :
top:5px : Khoảng cách của widget ads với lề trên của trang blog, web.
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=1200 : 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 1200px thì widget sẽ tự động trượt lên trên. Các bạn chỉnh sửa thông số này sao cho phù hợp nhất với footer của các bạn.
4 comments
bai nay hay qua.............
cái này bị dở 1 chỗ là,khoảng cách tới footer thì tự động trượt lên trên, tại sao ko làm theo khi tới khoảng cách hay tới div footer thì dừng lại, nó sẽ lấy div footer làm chuẩn lúc dó, còn khi kéo lên thì trở về ban đầu
Mình thấy code bạn rất hay và tiện, lúc trước mình cũng tìm đc 1 code như vậy nhưng dài và khó hiểu hơn.
Bạn có thể chỉnh lại như ý mình trên đc ko?
thanks
Hay lắm bạn à, nhưng mình chèn vào thì nó che mất một phần bài viết của mình. Bạn có cách nào cho nó trượt phải hoặc trái được ko? Mình có thể làm 2 thanh trượt bên phải và bên trái trang web được không? Cảm ơn bạn
@nguyen TuyetTạo quảng cáo trượt dọc 2 bên thì tham khảo ở đây
Đăng nhận xét