Pop-up Ads Codes Created For Blogger

In today's article, you'll learn how to implement Pop-up Ads and what their purpose is. Along with providing answers to all your questions, I'll also provide you with the necessary codes that will help you add Pop-up Ads to your Blogger website.

Note: Before proceeding, carefully read how to implement these codes. If any rule is not followed correctly, these codes may not work.To add Pop-up Ads to your Blogger website, follow these steps:

To Add Pop-up Ads To Your Blogger Website, Follow These Steps:

Access Your Blogger Dashboard: Sign in to your Blogger account and locate the dashboard of the blog where you wish to incorporate the pop-up.

Edit HTML: Head to the "Theme" section in the left-hand menu and choose "Edit HTML.

Backup Your Template: It's prudent to create a backup of your template before proceeding with any alterations. Simply click on the "Download Theme" button to initiate the backup process.

HTML Code -->

Now locate the </body> section. Paste the provided code just above </body>.

      
 <script>/<![CDATA[/
document.addEventListener("DOMContentLoaded", function() {
  var popupContainer = document.getElementById("popup-container");
  var closeButton = document.querySelector("#popup .close");
  // created by - alhankar.com
  function showPopup() {
    popupContainer.style.display = "block";
  }
  // created by - alhankar.com
  function hidePopup() {
    popupContainer.style.display = "none";
  }
  closeButton.addEventListener("click", hidePopup);
  showPopup();
});
/*]></script>

  

Css Code -->

Now locate the ]]></b:skin> section. Paste the provided code just above ']]></b:skin>'.

      /* Created By - Alhankar.com */
#popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 9999;
}
#popup {
  background-color: #fff;
  width: 70%;
  max-width: 400px;
  margin: 100px auto;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Created By - Alhankar.com */
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
  

Final Step! 

If you've inserted the HTML and CSS code, click the 'Save' button to save all of these codes. Then, navigate to the post section of your Blogger.

Upon returning to the Blogger's Post Option, whenever you intend to create a pop-up ads code, you can tailor it according to your preferences. Now, you'll only need to work with the code provided below. This is because the codes mentioned above need to be inserted only once.

Post Code -->

When you're prepared to craft an advertisement, employ this code. Continuously engage with this code and customize it to develop a captivating advertisement.

      <div id="popup-container">
  <div id="popup">
    <span class="close">&times;</span>
    <!-- Type Ads Code Here --->
  </div>
</div>
  

How to Apply Pop-up Codes? 

आपको Post Code मे आपको <!-- Type Ads Code Here ---> इस code को हटा कर अपना ads code या जो अपने code तैयार किया उस पेस्ट कर दे। और आप जिस पोस्ट या Blogger वेबसाइट पर दिखाना चाहते है उस उधर पेस्ट कर दे। अब आपका Pop-up ads तैयार है। 

The benefits of using pop-up ads in a Blogger website include:

• 1. Attention-Grabbing: Pop-up ads have a higher chance of grabbing users' attention as they appear suddenly and prominently on the screen.
• 2. Promotion of Products or Services: Businesses can use pop-up ads to effectively promote their products, services, or special offers to visitors of their Blogger website.
• 3. Lead Generation: Pop-up ads can be utilized to capture leads by encouraging visitors to sign up for newsletters, download resources, or participate in surveys, thereby expanding the website's subscriber base.
• 4. Increased Engagement: Pop-up ads can engage visitors by providing them with relevant information, offers, or calls to action, leading to higher interaction rates compared to static content.
• 5. Improved Conversion Rates: When strategically implemented, pop-up ads can contribute to higher conversion rates by directing visitors to specific pages or encouraging them to take desired actions, such as making a purchase or signing up for a service.
• 6. Enhanced User Experience: Despite their sometimes controversial reputation, well-designed and properly timed pop-up ads can enhance the user experience by delivering valuable content or offers that align with visitors' interests or needs.
• 7. Customization and Targeting: Pop-up ads offer flexibility in terms of customization and targeting options, allowing website owners to tailor their messages to specific audience segments or demographics for maximum effectiveness.

By leveraging the benefits of pop-up ads in a Blogger website, website owners can effectively engage visitors, promote their offerings, and drive desired actions to achieve their business objectives.

Copyright © Alhankar