Nếu bạn muốn tạo quảng cáo hiển thị sai – Add a Parallax Ads cho blogger để tăng doanh thu từ Adsense thì bài viết này sẽ hướng dẫn từng bước cách thêm quảng cáo với hiệu ứng thị sai cho blogger. Vì vậy, hãy vui lòng đọc toàn bộ bài viết để tìm hiểu về cách thêm Quảng cáo thị sai trong Blogger.Quảng cáo hiển thị sai là gì

Thị sai là một định dạng hiển thị hấp dẫn, đẹp mắt được thiết kế cho web di động. Nó tận dụng hiệu ứng hoạt hình thị sai, nhiều lớp để thu hút sự chú ý theo một cách thú vị và không xâm phạm. Định dạng này tạo ra nhận thức độc đáo rằng các lớp hình ảnh khác nhau của quảng cáo có độ sâu khác nhau. Khi người xem cuộn qua nội dung trên điện thoại của họ, quảng cáo sẽ hiển thị đầy đủ.

Cách 1

Chèn quảng cáo thị sai trên bài đăng của Blogger

Sau đây là hướng dẫn các bước thêm quảng cáo với hiệu ứng thị sai vào các bài đăng trên blog của blogger.

Bước 1: Chèn mã quảng cáo vào tiện ích HTML/JavaScript

Trong Bố cục tiện ích lần lượt thêm 2 tiện ích HTML/JavaScript và kéo nó nằm bên dưới tiện ích Bài đăng trên Blog.

Chèn 2 widget quảng cáo bên dưới widget blog posts

Trong mỗi tiện ích chèn mã quảng cáo 300×600 và 300×200

Đặt tên cho tiện ích quảng cáo và Lưu lại.

Bước 2: Chỉnh sửa lại tiện ích đã thêm trong HTML của Chủ đề

Vào chỉnh sửa HTML của Chủ đề chọn Chuyển đến tiện ích HTML đã thêm, chèn điều kiện hiển thị widget trên mobile và trang bài viết

<b:widget cond='data:blog.isMobileRequest and data:view.isPost'>...</b:widget>

Hình minh họa

Tiếp theo sửa lại nội dung trong thẻ <b:includable id=’main’> của tiện ích

Tiện ích QC 300×600

<b:includable id='main'>
  <b:attr name='class' value='banner-body hidden'/>
  <b:attr name='data-version' value=''/>
  <b:attr name='id' value=''/>
  <div class='banner-content'>
    <div class='banner-position'>
      <div class='banner-display'><div class='banner-iframe'><data:content/></div></div>
    </div>
  </div>
</b:includable>

Tiện ích QC 300×200

<b:includable id='main'>
  <b:attr name='class' value='banner-post hidden'/>
  <b:attr name='data-version' value=''/>
  <b:attr name='id' value=''/>
  <div class='banner-300'><data:content/></div>
</b:includable>

Tiến hành Lưu chủ đề sau khi đã cấu hình lại tiện ích.

Bước 3: Chèn quảng cáo tự động trong nội dung bài viết.

Sử dụng script với jquery, chèn trước thẻ đóng </body>

<script>//<![CDATA[
  window.addEventListener('load',function(){
    var a=15, // QC hiển thị sau mỗi 15 thẻ <br>
      b=$('.banner-post'),
      c='<div class="banner-post">'+b.html()+'</div>',
      d=$('.banner-body'),
      br=$('.post-body br'),
      e=Math.ceil(br.length/2)
    if(br.length!=''){
      if(b.length!=''){
        if(br.length>a)for(var i=a;i<br.length;i+=a)$(c).insertAfter(br[i])
        $(b).remove()
      }
      if(d.length!=''){
        $(d).insertAfter(br[e]).removeClass('hidden')
        var _w=$(window).width()+'px',_h=$(window).height()+'px'
        $('.banner-content').css({'height':_h})
        $('.banner-position').css({'height':_h,'clip':'rect(0 '+_w+' '+_h+' -20px)'})
        $('.banner-display').css({'width':_w,'height':_h})
        $('.banner-iframe').css({'height':_h})
      }
    }
  })
//]]></script>

Bước 4: Chèn CSS hiển thị quảng cáo

Chèn css trong thẻ <b:skin>

banner-post.hidden, .banner-body.hidden {
    display: none;
}
.banner-post {
   background: #f8f9fa;
   margin: 20px -15px;
}
.banner-post:before {
    content: "Quảng cáo";
    display: block;
    text-align: center;
    font-size: 12px;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: -5px 0 5px 0;
}
.banner-post>.widget-content {
    width: 300px;
    margin: 0 auto;
}
.banner-post a {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner-post img {
    width: 100%;
    height: auto;
}
.banner-body {
    position: relative;
    top: 20px;
}
.banner-body:after {
    content: "Kéo xuống để xem tiếp sau quảng cáo";
    font-size: 12px;
    color: #ccc;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: -35px;
    left: 0;
    right: 0;
}
.banner-content {
    width: 100%;
    margin:20px 0;
}
.banner-position {
    position: absolute;
    width: 100%;
}
.banner-display {
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
}
.banner-iframe {
    display: block;
    position: relative;
}
@media (min-width:481px) {
    .banner-body,.banner-post {
        display: none!important;
    }
}

Bước 5: Kiểm tra hiển thị quảng cáo