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

Posted on 22 thg 8, 2019 By Huỳnh Phụng Blogger

22
thg 8

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

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

Banner sẽ xuất hiện chi trên mobile
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 đó
Một số trang web báo lớn thường hay sử dụng phương pháp này
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'>

<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>