Hướng dẫn tạo code quảng cáo dạng Image slidebar và float ads giống trang www.youritv.net

Có nhiều bạn hỏi tôi cách để tạo code quảng cáo giống trang Quà tặng âm nhạc trực tuyến miễn phí. Hôm nay tôi sẽ chia sẻ với các bạn cách thực hiện code này.

Về cơ bản thì nó gồm 2 phần đó là quảng cáo dạng Image slidebar và dạng float ads. Hai phần này đều sử dụng JQuery.

Không cần nói nhiều đến lý do mà các bạn hỏi về script này nữa đúng không, nó khá là hấp dẫn với người xem. Các bạn cứ làm theo là sẽ có ngay những quảng cáo riêng cho mình thôi. Chúng ta cùng bắt đầu nào :

Bước 1 : Nhúng script JQuery mới nhất vào website của bạn (Nếu bạn nào có rồi thì bỏ qua bước này nhé !)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>

Bước 2 : Thêm đoạn css vào file css của bạn hoặc trong thẻ <style> trên website hay blog của bạn.

/*Css for Float Ads*/ #floatDivWrapper {font-size:11px} #floatDiv.fixed {position:fixed;top:30px} /*Css for image slidebar*/ .adsslideshow {position:relative; width:160px; height:600px;} .adsslideshow img {position:absolute;left:0; top:0;} .adsslideshow {position:relative; width:160px; height:600px;} .adsslideshow img {position:absolute;left:0; top:0;}

Bước 3 :  Copy và paste code dưới đây vào phần bạn muốn hiển thị quảng cáo.

/*Code for Float Ads*/ <script type='text/javascript'>//<![CDATA[ $(document).ready(function(){var documentHeight=$(document).height();if(documentHeight>550){ //$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':30}); var bottomHeight=120;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'>/*Thay nội dung quảng cáo của bạn tại đây*/ <a href="http://adf.ly/X7C1L"><img src="http://static.lazada.vn/cms/images%20LAP/20131007_Watches_300x250.jpg" width="285" height="250"/></a></div>/*Code for Float Ads========================================================*/ <div class="adsslideshow">/*Thay nội dung quảng cáo của bạn tại đây*/ <a href="http://adf.ly/X75ue"><img src="http://static.lazada.vn/cms/images%20LAP/2013_08_14_AFF_HAP_160x600.jpg" width="160" height="600" /></a> <a href="http://adf.ly/X75fa"><img src="http://static.lazada.vn/cms/images%20LAP/2013_08_14_AFF_HnL_160x600.jpg" width="160" height="600" /></a> <a href="http://adf.ly/X76gB"><img src="http://static.lazada.vn/cms/images%20LAP/2013_07_18_AFF_ETV_160x600.jpg" width="160" height="600" /></a> <a href="http://adf.ly/X771f"><img src="http://static.lazada.vn/cms/images%20LAP/2013_07_18_AFF_CnL_160x600.jpg" width="160" height="600" /></a> <a href="http://adf.ly/X787V"><img src="http://static.lazada.vn/cms/images%20LAP/2013_07_18_AFF_MnT_160x600.jpg" width="160" height="600"/></a> <a href="http://adf.ly/X78Te"><img src="http://static.lazada.vn/cms/images%20LAP/2013_08_14_AFF_BOO_160x600.jpg" width="160" height="600"/></a> <a href="http://adf.ly/X78nY"><img src="http://static.lazada.vn/cms/images%20LAP/2013_08_14_AFF_Baby_160x600.jpg" width="160" height="600"/></a> <a href="http://adf.ly/X7975"><img src="http://static.lazada.vn/cms/images%20LAP/2013_08_14_AFF_FAS_160x600.jpg" width="160" height="600"/></a> <a href="http://adf.ly/X79U4"><img src="http://static.lazada.vn/cms/images%20LAP/2013_08_14_AFF_GEN_160x600.gif" width="160" height="600"/></a> <a href="http://adf.ly/X79uV"><img src="http://static.lazada.vn/cms/images%20LAP/2013_08_14_AFF_HnB_120x600.jpg" width="160" height="600"/></a> <a href="http://adf.ly/X7ACn"><img src="http://static.lazada.vn/cms/images%20LAP/2013_08_14_AFF_SPO_160x600.jpg" width="160" height="600"/></a> <a href="http://adf.ly/WzmtS"><img src="http://static.lazada.vn/cms/images%20LAP/20131002_low_budget_shopping_160x600.jpg" width="160" height="600"/></a> <a href="http://adf.ly/Wzpkt"><img src="http://static.lazada.vn/cms/images%20LAP/20131004_Iphone_160x600.jpg" width="160" height="600"/></a> <a href="http://adf.ly/X7C1L"><img src="http://static.lazada.vn/cms/images%20LAP/20131007_Watches_120x600.jpg" width="160" height="600"/></a></div><script language="javascript" type="text/javascript"> $(document).ready(function(){ $('.adsslideshow a:gt(0)').hide(); setInterval(function(){ $('.adsslideshow a:first-child').fadeOut() .next('a').fadeIn() .end().appendTo('.adsslideshow');}, 9000); }); </script>

Kết quả sẽ giống như hình dưới đây :

Code quảng cáo cho website và blog.

Xem demo tại đây.

Vậy là xong, quá đơn giản phải không nào các bạn. Chúc các bạn vui vẻ và kiếm được nhiều tiền từ việc đặt quảng cáo.