Cách tạo banner quảng cáo trượt dọc hai bên website/ blogger


Đôi khi để tăng thêm không gian hiển thị cho web/ blog với các quảng cáo chạy dọc hai bên, đơn giản là các bạn chèn thêm một đoạn code nhẹ dạng html như bên dưới với các thông số được tùy cho phù hợp với web, blog của mình

Hình minh họa cho thấy hai banner trượt dọc hai bên sau khi mình đã chèn. Đoạn code rất nhẹ tương thích tôt với các nền tảng wordpress, blospot, joomlaa, drupal...


Trang web  đã chèn hai banner trượt dọc hai bên
Trang web demo đã chèn hai banner trượt dọc hai bên theo mẫu code bên dưới




<div id='ads-trai'>
   <div style='margin:0 0 5px 0; padding:0;width:160px;position:fixed; right:50%; top:125px; margin-right:512px;z-index:1'> 
   <span style="color: #ff0000;" data-mce-style="color: #ff0000;">

        <a href='http://phim14.me/'><img src='http://farm6.staticflickr.com/5759/31081343902_b95bee4751_o.png'/></a>
   </span>
   </div>
</div>


<div id='ads-phai'> 
   <div style='margin:0 0 5px 0; padding:0;width:160px;position:fixed; left:50%; top:125px; margin-left:512px;'>
   <span style="color: #ff0000;" data-mce-style="color: #ff0000;">
         <a href='http://www.phim14.me/'><img src='http://farm6.staticflickr.com/5759/31081343902_b95bee4751_o.png'/>     </a>
   </span>
   </div>
</div>
Sau khi chèn xong các bạn kiểm tra và tùy chỉnh các thông số 50% tăng giảm để vị trí của banner phù hợp với web/ blog của mình

Đoạn code thứ hai cũng tương tự như đoạn code đầu tiên với hai banner riêng biệt hai bên. Các bạn có thể điều chỉnh độ rộng của banner bằng cách thay thông số 120 px, điều chỉnh vị trí bằng cách thay đổi 10px thành con số phù hợp với web cảu mình.


<div id="left_ads_float"> <a href="Link web 1" target="_blank"><img border="0" src="Link hình ảnh 1" width="120" /></a> </div> 

<div id="right_ads_float"> <a href="Link web 2" target="_blank"><img border="0" src=" Link hình ảnh 2" width="120" /></a> </div> 
<style> #left_ads_float { top:10px; left: 10px; position:fixed; } #right_ads_float { top:10px; right: 10px; position:fixed; } </style> <script> var vtlai_remove_fads=false; function vtlai_check_adswidth() { if(vtlai_remove_fads) { document.getElementById('left_ads_float').style.display='none'; document.getElementById('right_ads_float').style.display='none'; return; }else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1) { vtlai_remove_fads=true; vtlai_check_adswidth(); return; } else { var lwidth=parseInt(document.body.clientWidth); if(lwidth<1110) { document.getElementById('left_ads_float').style.display='none'; document.getElementById('right_ads_float').style.display='none'; } else { document.getElementById('left_ads_float').style.display='block'; document.getElementById('right_ads_float').style.display='block'; } setTimeout('vtlai_check_adswidth()',10); } } </script>


Nếu có gì thắc mắc thì các bạn hãy để lại tin nhắn bên dưới mình sẽ trả lời cho các bạn

phodesign

⭐♡ Hãy cùng nhau chia sẽ những thông tin hay nhất về kiến trúc và các file mẫu bản vẻ đẹp nhé !.

3 Nhận xét

!❄♡ Góp ý và bình luận nhanh:
✪★ Vui lòng để lại comment yêu cầu của các bạn lên khung bình luận bên dưới để được hỗ trợ nhanh nhất từ chúng tôi.
✪★ Comment hình ảnh dễ dàng bằng cách dán link ảnh hay link video trực tiếp vào khung bình luận.
✪★ Vui lòng để lại bình luận hay yêu cầu với có tên hay nick name thật của của các bạn để được hỗ trợ nhanh nhất.
✪★ Chúc các bạn có thật nhiều thành công nhé!

  1. Cảm ơn bài viết hữu ích, đểm xem tập làm xem. Nếu gặp sự cố gì sẽ nhờ anh giúp ạ

    Trả lờiXóa
    Trả lời
    1. Okie bạn nhé. Nếu có gì thắc mắc thì bạn có thể comment lên đây để được hỗ trợ. Chúc bạn tạo được trang blog thành công. :))

      Xóa
  2. Đã làm thành công, cảm ơn ad nhiều nhiều

    Trả lờiXóa
Mới hơn Cũ hơn