Tạo Banner quảng cáo trên Mobile theme Tinhdauonline Premium

Ngày nay người dùng truy cập online trên các thiết bị Mobile tương đối là nhiều cho nên việc tối ưu người dùng trên các thiết bị mobile ngày càng quan trọng.

Do vậy có 1 cách để bạn hướng tới người dùng trên các thiết bị truy cập mobile là thiết lập các tính năng bán hàng mới hướng tới họ

Ví dụ trong bài viết này hiện Banner quảng cáo/khuyến mãi trên di động

Tạo Banner quảng cáo trên Mobile theme Tinhdauonline Premium
Tạo Banner quảng cáo trên Mobile theme Tinhdauonline Premium


Những điều cần lưu ý:

  1. Banner sẽ xuất hiện chi trên mobile
  2. Dùng để quảng cáo cho 1 sản phẩm hoặc 1 danh mục nào đó mà khi người dùng click vào banner sẽ chuyển tới mục đó
  3. Một số trang web báo lớn thường hay sử dụng phương pháp này
  4. Hiện tại mình chỉ mới cài đặt trên trang chủ theme Tinhdauonline Premium

Hướng dẫn cài đặt banner quảng cáo Mobile

Trong Theme Tinhdauonline bạn di chuyển đến Bộ cục ↪ Banner mobile và chỉnh sửa


Sẽ có đoạn code sau:

<div class='banner-content'>
    <div class='banner-position'>
      <div class='banner-display'>
        <div class='banner-iframe'>
         <!-- Chèn mã quảng cáo ở đây -->
          <a rel="nofflow" href='#' >
            <img src='https://1.bp.blogspot.com/-qXIhE-84aCU/XQUr8G-vR-I/AAAAAAAAOxg/a3hxhcRC2GEbsLlN5qratX1UEPnuULP6ACLcBGAs/s600/banner-img.jpg' width='100%'/>
          </a>
        </div>
      </div>
    </div>
  </div>
<script>//<![CDATA[
    $(function() {
      var banner_content = document.querySelector('#banner-body');
      var banner_width = $(window).width() + 'px';
      var banner_height = $(window).height() + 'px';
      $('.banner-content').css({'height': banner_height});
      $('.banner-position').css({'height': banner_height,'clip': 'rect(0 '+ banner_width +' '+ banner_height +' -50px)'});
      $('.banner-display').css({'width': banner_width,'height': banner_height});
      $('.banner-iframe').css({'height': banner_height});
      if (banner_content) {
        $('.banner-content').appendTo(banner_content);
      } else {
        $('.banner-content').remove();
      }
    });
  //]]></script>
<div id="banner-body"></div>

Với:

  • Bạn sẽ thay link banner mới thay cho banner mẫu: kích thước tối ưu là 600px
https://1.bp.blogspot.com/-qXIhE-84aCU/XQUr8G-vR-I/AAAAAAAAOxg/a3hxhcRC2GEbsLlN5qratX1UEPnuULP6ACLcBGAs/s600/banner-img.jpg
  • href='#': Thay dấu # thành link trang đích chuyển tới

Chúc bạn thành công!