Blogger Popup Code Options

SF Games
December 29, 2022

Blogger Popup Code Options

There are a few different ways you can add a popup to your Blogger blog. Here are some options you might consider:

  1. Use a plugin: There are several plugins available that allow you to easily add a popup to your Blogger blog. Some popular options include Popup Maker, Popup by Supsystic, and PopupAlly. These plugins typically offer a wide range of customization options, including the ability to set the trigger for the popup (e.g., when a visitor clicks a button or after a certain amount of time has passed), choose the appearance of the popup, and add content to the popup (e.g., text, images, forms).

  2. Use custom code: If you're comfortable working with HTML, CSS, and JavaScript, you can create a custom popup by adding the necessary code to your blog's template. There are many tutorials available online that can help you do this. One method is to use the Bootstrap modal component, which allows you to create a responsive, customizable popup with just a few lines of code.

  3. Use a third-party service: There are also a number of third-party services that allow you to create and add a popup to your Blogger blog. Some popular options include Popup Maker, OptinMonster, and Sumo. These services typically offer a wide range of customization options and allow you to easily add the popup to your blog by copying and pasting a piece of code into your template.

Create HTML Popup Code:

To create a popup window in HTML that automatically opens when a webpage loads, you can use the following code:


<html>
  <head>
    <script>
      function openPopupWindow() {
        window.open("popup.html", "Popup Window", "height=500,width=500");
      }
    </script>
  </head>
  <body onload="openPopupWindow()">
    <!-- Your webpage content goes here -->
  </body>
</html>

This code will create a function called openPopupWindow that opens a popup window with the specified dimensions when the onload event is triggered. The onload event is triggered when the webpage has finished loading. You can change the dimensions of the popup window by modifying the height and width values in the window.open function.

You can also customize the content of the popup window by creating a separate HTML file called popup.html and including the desired content in that file.

Note that some browsers may block popups from automatically opening, so the user may need to allow the popup in order for it to display.

Here is an example of how this could be implemented in HTML and JavaScript:

<div id="notification">
  <p>Welcome to our site!</p>
  <button id="close-notification">Close</button>
</div>

<script>
  var notificationCookie = getCookie("notificationDisplayed");
  if (notificationCookie !== "true") {
    document.getElementById("notification").style.display = "block";
  }

  document.getElementById("close-notification").addEventListener("click", function() {
    document.getElementById("notification").style.display = "none";
    setCookie("notificationDisplayed", "true", 365);
  });

  function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }

  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }
</script>

In this example, the notification div will only be displayed if the notificationDisplayed cookie is not set to "true." The user can then close the notification by clicking the Close button, which sets the notificationDisplayed cookie to "true" and hides the notification div.

To create a popup on your blogger website that only opens once per user, you can use the following code:

  1. In the blogger HTML editor, navigate to the location where you want the popup to appear.
  2. Add the following code to the page:
<div id="popup" style="display:none;">
  <p>Welcome to my website!</p>
  <p>Thank you for visiting.</p>
</div>

  1. Add a JavaScript function that will display the popup when the page loads. This function should also set a cookie to remember that the popup has been shown to the user.
<script>
  function showPopup() {
    var popup = document.getElementById('popup');
    popup.style.display = 'block';
    document.cookie = "popup_shown=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
  }
  if (document.cookie.indexOf("popup_shown=true") < 0) {
    showPopup();
  }
</script>

  1. You can customize the appearance and content of the popup by modifying the HTML code in the <div> element and the CSS in the style attribute.

  2. To close the popup, you can add a button or link that calls the hidePopup() function, which hides the popup and sets the cookie to remember that the popup has been shown.

<script>
  function hidePopup() {
    var popup = document.getElementById('popup');
    popup.style.display = 'none';
    document.cookie = "popup_shown=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
  }
</script>

<button onclick="hidePopup()">Close Popup</button>

Note: This code assumes that the user's browser supports cookies. If the user has cookies disabled, the popup will continue to appear every time the page is loaded.


Regardless of which method you choose, be sure to test your popup thoroughly to ensure it is working correctly and not disrupting the user experience on your blog.


I hope this helps! Let me know if you have any questions or if you need further assistance.