How To Add Popup In Blogger

A popup is a small window that appears on a website to show messages, announcements, ads, email subscriptions, or important information.

Many bloggers use popups to:

• Show important announcements
• Collect email subscribers
• Promote offers or updates
• Increase user engagement

If you have a Blogger blog, you can easily add a popup using simple HTML, CSS, and JavaScript code.

In this guide, you will learn how to add a popup in Blogger step by step.

Add Popup In Blogger Using HTML Code

Follow these simple steps to add a popup to your Blogger blog.

• Go to Blogger.com
• Login to your account
• Select your blog
• Click Theme
• Click Customize
• Click Edit HTML

Now paste the following popup code before the tag.

<style>
#popupBox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}
.popup-content{
background:#fff;
padding:20px;
width:300px;
text-align:center;
border-radius:10px;
}
.close-btn{
cursor:pointer;
color:red;
font-size:18px;
}
</style>
<div id="popupBox">
<div class="popup-content">
<span class="close-btn" onclick="closePopup()">✖</span>
<h2>Welcome To My Blog</h2>
<p>Thank you for visiting our blog. Stay connected for latest updates!</p>
</div>
</div>
<script>
function closePopup(){
document.getElementById("popupBox").style.display="none";
}
</script>

• Click Save Theme.

Now when visitors open your blog, the popup will appear automatically.

What Can You Use Popup For?

You can use popup in Blogger for many purposes.

1. Email Subscription

Collect email subscribers from visitors.

2. Important Announcement

Show important updates or news.

3. Special Offers

Promote deals, discounts, or products.

4. Welcome Message

Greet new visitors to your blog.

Conclusion

Adding a popup in Blogger is very easy. You only need to paste a simple HTML, CSS, and JavaScript code inside your theme.

Popups help you increase engagement, show announcements, and collect subscribers.

If used properly, they can make your Blogger blog more professional and interactive.