Hello everyone, on this occasion in 2026 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 in 2026, for a demo you can see via the button below.
So this parallax ad only appears on the mobile display in 2026, not on the desktop, because this type of ad is more suitable for display on mobile.
In this tutorial 2026 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 jQuery so it will not have a bad impact on loading the blog of course in 2026.
How to Create Parallax Ads in the Middle of Blogger Posts 2026
Please create an ad unit first in 2026 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 in 2026, 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 in 2026, so please try one by one.
HTML + JS • Parallax Ad Code 2026
<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>
</div>
<script>//<![CDATA[
function mytrickpkparalax(Ad1){
let p=document.getElementsByClassName('mytrickpkparalax')[0];
if(p){
let s=document.querySelectorAll('.post-body p')[Ad1-1];
s.parentNode.insertBefore(p,s.nextSibling)
}
}
mytrickpkparalax(4);
//]]></script>
</b:if>
</b:if>CSS Code • Parallax 2026
/* TrickPk Premium Parallax Ads 2026 */
.mytrickpkparalax{
position:relative;display:block;overflow:visible;
width:100%;height:0;margin:auto;z-index:1;
text-align:center
}
.mytrickpkparalax > div{
overflow:hidden;width:100%;height:100%;
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;transform:translateZ(0)
}
.mytrickpkparalax > div > div > div{
display:flex;align-items:center;
width:100%;height:100%;position:absolute;
left:0;right:0;top:37px;background:#fff
}
.mytrickpkparalax ins{height:100%;border:0}
.mytrickpkparalax{
width:100%;min-width:300px;
min-height:600px;text-align:center
}
.adParallax{
width:100%;min-width:300px;min-height:600px;
display:block;margin:10px 0;padding:0
}Kindly replace your ca-pub-xxxxxxxxxxx and data-ad-slot='xxxxxxxxxxx' in 2026, 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 in 2026 so please change it as needed.
Outcomes 2026
When writing articles in 2026 must use the <p> tag when creating a paragraph so that the ad can appear.
If you have in 2026, 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 in 2026, hopefully it's useful.