Make Sticky Adsense Ads Attached Below
Updated on 14 May
Indeed, Google prohibits using sticky ads, ie ads that float and continue to appear when scroll. Because this can disrupt blog visitors.
However, Google itself provides automatic advertising in which there is an ad anchor feature where ads will appear at the top or bottom of the screen.
However, this automatic anchor ad does not interfere with visitors, because it only has 50px height and only appears on a vertical screen like on a smartphone and if visitors are a little annoyed then there is a button to hide it easily.
And also the appearance of this automatic anchor ad is only at the optimal time (so it does not burden the page loading).
Automatic sticky ads will certainly not appear on the PC desktop page, so the solution is to manually install and create sticky ads, which will appear below the screen. As in the picture above, it looks like a sticky ad on the amp, quite interesting to try.
If the problem is safe or not, I consider it safe on the condition that the ad does not interfere with visitors - whether it's an ad that covers the content or layout of a widget that can cause accidental clicks.
And if the display of the ad is too large, that is not allowed. How! Do you want to try making Sticky Ads like amp sticky ad, here's how:
Save the following code at the bottom of the </body> tag, *Important.
After that, replace the ad code marked with your ad. I recommend using an ad code that is 970x90 or 728x90 wide. Because from my experiments the 970x90 unit can perform well, in contrast to responsive units that do not appear / appear (even ads are not processed).
The ad code above will not be displayed on the error and static pages/page. And it will only appear on the desktop page, because if the mobile page is enough with automatic ads (anchor), and if the manual ad with 90px height it might be too big for the mobile display.
I created a special ad, code 300 for the condition of the ad will appear when the scroll. Obviously, when scrolling if the page has shifted up along the 300px ad will appear. And removeEventListener so that the ad viewer script doesn't run again so the page becomes lighter.
Does not include a close button, but the down button means that the ad is no longer displayed sticky / floating. However, it will appear at the bottom according to the location of the code. That is why the ad must be placed at the bottom.
However, Google itself provides automatic advertising in which there is an ad anchor feature where ads will appear at the top or bottom of the screen.
However, this automatic anchor ad does not interfere with visitors, because it only has 50px height and only appears on a vertical screen like on a smartphone and if visitors are a little annoyed then there is a button to hide it easily.
And also the appearance of this automatic anchor ad is only at the optimal time (so it does not burden the page loading).
Automatic sticky ads will certainly not appear on the PC desktop page, so the solution is to manually install and create sticky ads, which will appear below the screen. As in the picture above, it looks like a sticky ad on the amp, quite interesting to try.
If the problem is safe or not, I consider it safe on the condition that the ad does not interfere with visitors - whether it's an ad that covers the content or layout of a widget that can cause accidental clicks.
And if the display of the ad is too large, that is not allowed. How! Do you want to try making Sticky Ads like amp sticky ad, here's how:
How to Make Adherent Advertisements Sticky Ads Responsive
Save the following code at the bottom of the </body> tag, *Important.
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:blog.isMobileRequest == "false" and not data:blog.searchQuery'><style>/*<![CDATA[mankoin.com*/.sticky-ad{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:sticky;text-align:center;left:0;width:100%;z-index:999;max-height:100px;background-image:none;background-color:#fff;box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;transition:all .4s ease-in-out;max-width:100%;height:100px;bottom:0;-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}@-webkit-keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}@keyframes fade-in{0%{bottom:-100px}100%{bottom:0}}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:-28px;right:0;background-size:24px 24px;background-position:2px;background-color:#fff;background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:0;border-radius:12px 0 0 0;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' /%3E%3C/svg%3E");padding:0}/*]]>*/</style><div class='sticky-ad' id='sticky-ad'><ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-slot='9943136880' style='display:inline-block;width:970px;height:90px'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script><button aria-label='Close this ad' class='sticky-ad-close-button' onclick='this.parentElement.style.position='relative';this.style.display='none';'/></div><script>//<![CDATA[
function stickyAd(){var e=document.getElementById("sticky-ad");300<window.pageYOffset&&(e.style.display="block",window.removeEventListener("scroll",stickyAd))}window.addEventListener("scroll",stickyAd);//]]></script></b:if>After that, replace the ad code marked with your ad. I recommend using an ad code that is 970x90 or 728x90 wide. Because from my experiments the 970x90 unit can perform well, in contrast to responsive units that do not appear / appear (even ads are not processed).
970x90 or 728x90 ad units can also be loaded responsively automatically.
Here's what you might need to know about the script above:
The ad code above will not be displayed on the error and static pages/page. And it will only appear on the desktop page, because if the mobile page is enough with automatic ads (anchor), and if the manual ad with 90px height it might be too big for the mobile display.
I created a special ad, code 300 for the condition of the ad will appear when the scroll. Obviously, when scrolling if the page has shifted up along the 300px ad will appear. And removeEventListener so that the ad viewer script doesn't run again so the page becomes lighter.
Does not include a close button, but the down button means that the ad is no longer displayed sticky / floating. However, it will appear at the bottom according to the location of the code. That is why the ad must be placed at the bottom.
source:blog.krakentechno.com
0 comments for Make Sticky Adsense Ads Attached Below