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 == "true"'> <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"'>
<b:if cond='data:view.isSingleItem'> <!--[ Post body ]--> <div class='postEntry' expr:id='"postID-" + 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='"postID-" + data:post.id'> <div class='post-body postBody' id='postBody'> <data:post.body/> </div> </div> </b:if>