Làm Widget Trượt Giống Quảng Cáo Admicro cho Blogspot
Đăng vào: Thứ Hai, 2 tháng 3, 2015 | Chuyên mục:
Blogspot tuts
| Bình luận: 0
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>
Thay code quảng cáo màu đỏ thành code của bạn.
Lưu và xem kết quả
Ctrl + S
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.
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>
Thay code quảng cáo màu đỏ thành code của bạn.
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.
Chuyên mục: Blogspot tuts
Có 0 Lượt bình luận
Đăng nhận xét