How to Add Cookie Based Click ads to close popup in blogger
Hi to all, in this article I am going to tell you all about how to add cookie based click ads to close popup in blogger website easily in just few minutes by using HTML, CSS and JavaScript.
By adding this you can increase your AdSense clicks and impressions and can earn more revenue through google AdSense.
And also these below codes will not effect your website page speed, so you can use these codes in any blogger templates without any issues.
Read the below provided steps carefully and completely to get clear understanding about adding cookie based click ads to close the popup in blogger website without any error or issue.
Steps to Add Cookie Based Click ads to Close Popup
Step-1: First of all you need to login to your blogger website dashboard by using your login credentials.
Step-2: Now you need to follow the below path:
Blogger dashboard -> Click on theme section -> Click on arrow icon -> Click on backup option -> Click to download theme.
Step-3: Again follow the below path:
Blogger dashboard -> Theme section -> Click on Arrow icon -> Select Edit HTML option -> Blogger theme editor.
Step-4: You need to copy below given HTML code and paste the copied code any where in body tag or <body> tag and then you need to ad your ads code in the given code by just replacing with the default code.
<div class='AT-PCA show-btn'>
<div class='popup-container'>
<div class='AD-pop-header'>
Click On Ad For Closing Popup
</div>
<div class='AT-PCA-close'>
<p class='AT-PCA-close'>
<ins class='adsbygoogle' data-ad-client='ca-pub-000000000000' data-ad-format='auto' data-ad-slot='000000' data-full-width-responsive='true' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</p>
</div>
</div>
</div>
Step-5: Now you need to copy below given CSS code and paste the copied CSS code just above closing head tag or </head> tag.
<style>
.popup-container { max-width: 500px; margin: 0 auto; margin-top: 100px; font-family: "Roboto", sans-serif; background: white; padding: 15px; border-radius: 24px; position: relative; box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6); }
.AD-pop-header{ font-size: 20px; text-align: center; font-weight: bold;text-align: center; border-bottom: 1px solid #ccc; padding-bottom: 14px; } .AT-PCA { background: rgba(0, 0, 0, 0.8); position: fixed; z-index: 100; height: 100vh; width: 100%; left: 0; top: 0; display: none; z-index:9999;transition: 0.5s ease;}
.AT-PCA .AT-PCA-close { margin: 4px 0 4px; min-height: 290px;position:relative; }
.AT-PCA.show-btn{ display:block; transition: 0.5s ease; } .AT-PCA.hide-btn{ display: none; transition: 0.5s ease; }
</style>
Step-6: Now again copy below given JavaScript Code and paste the copied JavaScript code above closing body tag or </body> tag.
<script>
//<![CDATA[
const adssContainer = document.querySelector(".AT-PCA"); const closeBtn = adssContainer.querySelector(".AT-PCA-close"); closeBtn.addEventListener("click", () => { document.cookie = "WebsiteName01=anutrickz01; max-age=" + 24*60*60; adssContainer.classList.add("hide-btn"); setTimeout(()=>{ adssContainer.classList.add("hide"); }, 2000); }); const siteCookie01 = document.cookie.indexOf("WebsiteName01="); if(siteCookie01 != -1){ adssContainer.classList.remove("show-btn"); } else{ adssContainer.classList.add("show-btn");}
//]]>
</script>
Step-7: After adding the three code in correct place, then you need to click on save button.
Step-8: Now you have successfully added cookie based click ads to close popup in your blogger website.
Note
If you get any error or issue while saving the code, then you need to restore your backup code again and need to repeat the same process as provided in above steps.
If you wan tot change styles and colors for the popup then you need to edit CSS code, and for changing colors you need to replace color code and for color codes you can google color picker or any other third part color codes website.
Conclusion
I hope that you have understood about how to add cookie based click ads to close popup in your blogger website easily by using HTML, CSS and JavaScript.
