Hello everyone, on this occasion I will share how to create a parallax ad in the middle of a blogger post. Some time ago I tried to post a parallax ad on this blog and I wish I could make a tutorial just in case someone needs it, for a demo you can see via the button below.
DemoSo this parallax ad only appears on the mobile display, not on the desktop, because this type of ad is more suitable for display on mobile.
In this tutorial I show you how to make parallax ads really in the middle of posts like the trickpk.com blog and you can also set it in the paragraph to how many ads will be displayed, here I use pure javascript to display ads in the middle of the post without any touch jQuary so it will not have a bad impact on loading the blog of course.
How to Create Parallax Ads in the Middle of Blogger Posts
Please create an ad unit first by selecting a display ad, choose a vertical shape, let it be responsive and note down your data-ad-client and data-ad-slot codes .
Go to blogger select theme and edit html, copy the css below and place it above the code ]]></b:skin> and also copy the javascript code as below and place it under the code <data:post.body/> usually there is more than 1 of this code depending on the template you are using, so please try one - one.
<b:if cond='data:blog.isMobileRequest == "true"'> <b:if cond='data:view.isPost'> <div class='mytrickpkparalax'> <div> <div> <div> <ins class='adsbygoogle adParallax' data-ad-client='ca-pub-xxxxxxxxxxx' data-ad-slot='xxxxxxxxxxx' style='display:block'/> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <span class='clear'/> </div> <script> //<![CDATA[ // show ads on paragraphs so by https://www.trickpk.com function mytrickpkparalax(Ad1) {let paralax = document.getElementsByClassName ('mytrickpkparalax')[0]; if (paralax) {let Adsp = document.querySelectorAll ('.post-body p')[Ad1 - 1]; Adsp.parentNode .insertBefore (paralax, Adsp.nextSibling)}} mytrickpkparalax(4);/*]]>*/</script></b:if></b:if>
/* Paralax Ads by trickpk */ .mytrickpkparalax{position:relative;display:block;overflow:visible;width:100%;height:0;margin:auto;text-align:center;z-index:1} .mytrickpkparalax > div{overflow:hidden;width:100%;height:100%;margin:0;position:absolute;top:0;left:0;clip:rect(auto auto auto auto)} .mytrickpkparalax > 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)} .mytrickpkparalax > 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:#fff} .mytrickpkparalax > div > div > div > *{margin:auto} .mytrickpkparalax > div > div > div > a{width:100%;height:100%} .mytrickpkparalax img,.mytrickpkparalax iframe,.mytrickpkparalax ins{height:100%;border:0} .clear{clear:both;display:block} .mytrickpkparalax{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:10px 0px; padding:0px;}
kindly replace your ca-pub-xxxxxxxxxxx and data-ad-slot='xxxxxxxxxxx ' , you can also set in the paragraph how many ads will be displayed, pay attention to the code mytrickpkparalax( 4 ); number 4 means that the ad will appear after the 4th paragraph so please change it as needed.
Outcomes
When writing articles must use the <p> tag when creating a paragraph so that the ad can appear.
if you have, don't forget to click save and see the results, ok that 's how to make a parallax ad in the middle of a blogger post, hopefully it's useful.