How to create and add popup box in blogger

How to Create a Popup Box on a Blogger Website

Using a popup box can often help to grab the attention of site visitors. If you want to promote an offer, collect email subscriptions, or display important information, adding a popup box to a Blogger website can be a good choice. In this guide, we will show you the process of creating and adding a popup box to a Blogger website, which you can easily do using HTML and JavaScript.

Why is it necessary to use popup boxes on a Blogger website?

By using popup boxes, you can:

Increase engagement: Popups are very effective in attracting the attention of visitors.
Collect email subscriptions: You can collect email addresses through popups.
Display important announcements: You can use popups to show important information or updates to site visitors.

How to create a popup box on a blogger website

1. Go to your Blogger dashboard

First, log in to your Blogger account and open the blog where you want to add the popup box.

2. Edit the theme

Go to the "Theme" option on the left side of the Blogger dashboard and click on "Customize".

3. Open the HTML editor

Click on the "Edit HTML" option in the "Theme" section. This will allow you to add custom code to your blog's code.

4. Add the popup code

Copy the code below and paste it in your HTML file just before the </body> tag:

<div id="popup-box" class="popup" aria-labelledby="popup-heading" role="dialog" aria-hidden="true">
<div class="popup-content">
<span id="close-popup" class="close" aria-label="Close">×</span>
<div class="popup-inner">

<div class="popup-image">
<img src="https://img.freepik.com/free-photo/happy-curly-haired-student-laughs-funny-joke-social-networks-smiles-toothily-plays-game-online-modern-cellphone-dressed-stylish-outfit-stands-ripped-hole-background_273609-33951.jpg" alt="Join Our Community" />
</div>


<div class="popup-info">
<h2 id="popup-heading">Join Our Community</h2>
<p>Get the latest updates and exclusive content directly to your inbox.</p>
<form action="https://formspree.io/f/your-form-id" method="POST">
<input type="email" name="email" placeholder="Enter your email" required="true" />
<button type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
</div>

<style>
/* Popup Container */
.popup {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
animation: fadeIn 0.5s ease;
}

/* Fade-in animation */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* Popup Content */
.popup-content {
background: #ffffff;
border-radius: 15px;
width: 90%;
max-width: 800px;
display: flex;
overflow: hidden;
text-align: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
transform: scale(0.8);
animation: scaleUp 0.4s ease forwards;
}

/* Scale-up animation */
@keyframes scaleUp {
from {
transform: scale(0.8);
}
to {
transform: scale(1);
}
}

/* Popup Inner Flexbox Layout */
.popup-inner {
display: flex;
width: 100%;
}

/* Image Section */
.popup-image {
flex: 1;
height: 100%;
}

.popup-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* Information Section */
.popup-info {
flex: 1;
padding: 30px;
text-align: left;
}

/* Close Button */
.close {
position: absolute;
top: 15px;
right: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
cursor: pointer;
}
.close:hover {
color: #27ae60;
}

/* Input Field */
input[type="email"] {
width: 90%;
padding: 15px;
margin: 20px 0;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 16px;
}

/* Button */
button {
background-color: #27ae60;
color: #fff;
border: none;
padding: 15px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border-radius: 8px;
width: 100%;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #1e8a4d;
}

/* Text Styling */
h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
p {
font-size: 16px;
color: #555;
margin-bottom: 20px;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
// Show popup after a delay
setTimeout(() => {
document.getElementById("popup-box").style.display = "flex";
document.getElementById("popup-box").setAttribute("aria-hidden", "false");
}, 3000); // 3000ms = 3 seconds

// Close popup
document.getElementById("close-popup").addEventListener("click", function () {
document.getElementById("popup-box").style.display = "none";
document.getElementById("popup-box").setAttribute("aria-hidden", "true");
});
});
</script>

5. Save Changes

After adding the code, click the "Save" button. Your blog's popup box will now be active.

6. Customize the Popup

You can customize the text, design, or appearance of the popup by changing the HTML and CSS code. You can also control the display time of the popup by changing the "setTimeout" value in the script.

How to add Popup in Blogger:

Popup Display Time: You can set how long the popup will be displayed after the page loads. In the above code, the popup will be displayed after 2 seconds
Popup Design: You can easily customize the design of the popup by changing the CSS code.
Close button: The popup will have a close button (×), which allows users to close the popup.

FAQ (Frequently Asked Questions)

1. Is it difficult to add a popup box to a blogger website?

No, it is very easy. You can easily add a popup box to a blogger theme using only HTML, CSS, and JavaScript code. Follow our step by step guide.

2. How long will the popup appear?

The popup will usually appear 2 seconds after the page loads. If you want, you can increase or decrease the time by changing the "setTimeout" value in the code.

3. Can I change the design of the code?

Yes, you can completely customize the design of the popup by changing the CSS code. You can change the background, text, buttons, etc. of the popup.

4. Will the popup have a close button?

Yes, the popup will have a close button that will help users close the popup. It will appear as an "×" symbol and clicking on it will close the popup.

5. Can I use multiple popups?

Yes, you can use multiple popups on different pages of the blog or at different times. However, this can increase user annoyance, so be careful when using multiple popups.

6. Will the popup work on mobile devices?

Yes, the above code will work on mobile devices. However, you may need to make some changes to the CSS code to display the size and position of the popup correctly on mobile devices.

7. Is it possible to add an email subscription form to the popup box?

Yes, you can add an email subscription form to the popup box. The code we provided has a subscription form, where users can subscribe by entering their email address.

8. How to advertise through the popup box?

You can also display advertisements for your products or services in the popup box. For this, you can add any image, link or HTML content to the code

Conclusion

Adding a popup box to your Blogger website is a simple and effective way to increase engagement with your audience. By following the steps above, you can easily create a popup box and customize it according to your blog needs. It is very useful for displaying email subscriptions, special offers, or important announcements.

How to create and add popup box in blogger

How to Create a Popup Box on a Blogger Website

Why is it necessary to use popup boxes on a Blogger website?