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.
No comments:
Post a Comment