Hướng dẫn cài đặt quảng cáo thị sai - Parallax Ads cho blogspot/blogger

Nếu bạn muốn tạo quảng cáo 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 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 đủ.

DEMO

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.

Thêm mã CSS vào Mẫu Blogger

Lưu mã sau trên mã </head>

<b:if cond='data:view.isPost'>
<style>
/*<![CDATA[*/
/* Paralax Ads */
.paralax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1}
.paralax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)}
.paralax > div > div{width:calc(100% - 40px);height:100%;position:fixed;top:0;left:0;right:0;margin:0 auto;-moz-transform:translateZ(0);-webkit-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}
.paralax > div > div > div{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-align-content:center;align-content:center;-webkit-align-items:center;-ms-flex-align:center;width:100%;height:100%;position:absolute;left:0;right:0;top:37px;align-items:center;background:transparent}
.paralax > div > div > div > *{margin:auto}
.paralax > div > div > div > a{width:100%;height:100%}
.paralax img,.paralax iframe,.paralax ins{height:100%;border:0}
.clear{clear:both;display:block}
.paralax{width:100%;min-width:300px;min-height:600px;text-align:center}
.adParallax{width:100%;min-width:300px;min-height:600px;text-align:center;display:block;margin:0;padding:0}
/*]]>*/
</style>
</b:if>

Thay đổi .drK cho phù hợp với mẫu blog của bạn

Thêm mã Html

Thêm mã sau vào ngay dưới mã <data:post.body/>

<!--[ Paralax Ads ]-->
                                      <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>                                
                                      <b:if cond='data:view.isPost'>
                                        <div class='paralax'>
                                          <div>
                                            <div>
                                              <div>
                                                <ins class='adsbygoogle adParallax' data-ad-client='ca-pub-xxxxxxxxxxxxxxx' data-ad-format='auto' data-ad-slot='xxxxxxxxx' data-full-width-responsive='true' style='display:block'/>
                                                <script>
                                                     (adsbygoogle = window.adsbygoogle || []).push({});
                                                </script>
                                              </div>
                                            </div>
                                          </div>
                                        <span class='clear'/>
                                      </div>
                                      <script> /*<![CDATA[*/
                                     function paralax(Ad1) {let paralax = document.getElementsByClassName ('paralax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body br')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} paralax(4);/*]]>*/</script></b:if></b:if>
                                    <!--[ Paralax Ads ]-->

Mặc định của code javascript xác định vị trí hiện quảng cáo là dùng thẻ br để xuống dòng nếu blog sử dụng thẻ p để xuống dòng thì sửa lại .post-body br thành .post-body p
Chỉ số 4 là quảng cáo sẽ được gim sau khi cuộn tới dòng thứ 4. Và thay mã QC ads vào phần bôi màu cam.
Nếu muốn quảng cáo hiện trên màn hình PC thì loại bỏ thẻ điều kiện <b:if cond='data:blog.isMobileRequest == "true"'>

Lưu ý: Đối với một số mẫu đã có thay đổi về cấu trúc thẻ <data:post.body/> ví dụ như bên dưới

<b:if cond='data:view.isSingleItem'>
                          <!--[ Post body ]-->
                          <div class='postEntry' expr:id='&quot;postID-&quot; + data:post.id'>
                            <div class='postBody' id='postBody'>
                              <data:post.body/>                              
                            </div>
                          </div>
                        </b:if>

Trong thẻ <div class='postBody' id='postBody'> nó không có class post-body như trong javascript do vậy ta cần thêm class post-body thì quảng cáo mới hiện đúng vị trí ta chỉ định. Thêm vào nó sẽ như sau:

<b:if cond='data:view.isSingleItem'>
                          <!--[ Post body ]-->
                          <div class='postEntry' expr:id='&quot;postID-&quot; + data:post.id'>
                            <div class='post-body postBody' id='postBody'>
                              <data:post.body/>                              
                            </div>
                          </div>
                        </b:if>