Code tạo quảng cáo nổi giữa trang

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !
Các bạn muốn đặt một quảng cáo tạo chú ý cho thành viên. Có rất nhiều code giúp các bạn thực hiện việc này. Hôm nay mình xin chia sẻ với các bạn code tạo một quảng cáo giữa trang như thế.

Demo:


Để làm được việc này các bạn chèn đoạn code sau vào vị trí muốn hiển thị (nếu muốn hiển thị tất cả các trang các bạn có thể chèn vào footer)


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

<style type=”text/css”>
#floating
{
z-index: 450;
position: absolute;
width: 490px;
height: 368px;
}
#overPage
{
background: black;
z-index: 350;
position: absolute;
left: 0;
top: 0;
}
</style> 

<!–Begin Adv Popup–>
<div id=”ctl00_ContentPlaceHolder1_Adv_Popup_pnAdv”>
<div id=”overPage”>
</div>
<div id=”floating”>
<img src=”link ảnh” width=”490″ height=”360″ usemap=”#offline”
border=”0″ style=”cursor: pointer” /></div>
<map name=”offline”>
<area shape=”rect” coords=”420,0,490,30″ onclick=”javascript:closeMe();” alt=”Close”
style=”cursor: pointer” />
<area shape=”rect” coords=”0,30,490,330″ href=”Url site click vào ảnh  ” target=”_blank” onclick=”javascript:closeMe();” style=”cursor: pointer” />
</map> 

<script language=”javascript” type=”text/javascript”>
var lastScroll;
var delay = 30;
var speed = 500;
var img_w = 490;
var img_h = 360;
function centerIt() {
$(“#overPage”).css(“width”, $(window).width());
$(“#overPage”).css(“height”, $(document).height());
$(“#floating”).css(“left”, $(window).width() / 2 – img_w / 2);
$(“#floating”).css(“top”, $(window).height() / 2 – img_h / 2 + $(document).scrollTop());
}
$(document).ready(function() {
$(“#overPage”).css(“opacity”, 0.7);
$(“#overPage,#floating”).show();
centerIt();
});
$(window).scroll(function() {
setTimeout(function() { ani(); }, delay);
lastScroll = new Date().getTime();
});
$(window).resize(function() {
centerIt();
});
function ani() {
if ((new Date().getTime() – lastScroll) >= (delay – 20)) {
$(“#floating”).animate({ top: ($(window).height() / 2 – img_h / 2 + $(document).scrollTop()) }, speed);
}
}
function closeMe() {
$(“#overPage,#floating”).hide();
}
</script> 

</div>
<!–End Adv Popup–>

Các bạn thay link ảnh và link site cho phù hợp nhá
Vậy là xong. Bây giờ các bạn có thể ra ngoài trang chủ xem thành quả của mình rồi !
 

Web Design Technology blogs [ itdl ] Auto Backlink

HomeBlog ArchiveServicesLink2MeContactSubmit your PostPost RSS

Copyright © 2012 [ itdl ] Just for Share. Designed by Ngoc Luong - Freelancer

Best view in Chrome 11+, Firefox 5+ with resolution 1024 x 768 pixel. Powered by Blogger.