To implement the popup with countdown functionality on a Blogger website, follow these steps:
shown pop-up only once every 24 hours to visitors on your Blogger website
How to implement code follow steps after
below code
<style>
/* Add styles for the popup */
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background: #f4f4f4; /* Windows UI background color */
border: 1px solid #ccc; /* Windows UI border color */
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Windows UI box shadow */
z-index: 1000;
color: #333; /* Text color */
animation: fadeIn 0.5s ease-out forwards;
}
/* Add styles for the Join and Close buttons */
#popup button {
width: 48%; /* Adjust the width as needed */
margin: 5px;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
}
#popup #joinButton {
background: #0078d4; /* Windows UI primary button color */
color: #fff; /* Button text color */
}
#popup #closeButton {
background: #e0e0e0; /* Windows UI secondary button color */
color: #333; /* Button text color */
}
/* Add styles for the countdown */
#countdown {
font-size: 16px;
margin-top: 10px;
text-align: center;
}
/* Define fade-in animation */
@keyframes fadeIn {
to {
opacity: 1;
}
}
</style>
</head>
<body>
<!-- Add the popup div -->
<div id="popup">
<p>Welcome to our website! Join our Telegram group for the latest updates.</p>
<p id="countdown">Closing in 6 seconds...</p>
<button id="joinButton" onclick="joinTelegramGroup()">Join</button>
<button id="closeButton" onclick="closePopup()">Close</button>
</div>
<script>
// Function to check if 24 hours have passed since the last visit
function is24HoursPassed() {
var lastVisitTimestamp = localStorage.getItem('lastVisitTimestamp');
var currentTimestamp = new Date().getTime();
var twentyFourHoursInMillis = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
if (!lastVisitTimestamp || (currentTimestamp - lastVisitTimestamp) >= twentyFourHoursInMillis) {
localStorage.setItem('lastVisitTimestamp', currentTimestamp);
return true;
} else {
return false;
}
}
// Show the popup if 24 hours have passed since the last visit
if (is24HoursPassed()) {
document.getElementById('popup').style.display = 'block';
}
var countdownSeconds = 6;
// Function to join Telegram group
function joinTelegramGroup() {
// Replace the URL with your Telegram group link
window.location.href = 'https://t.me/YourTelegramGroup';
}
// Function to close the popup
function closePopup() {
document.getElementById('popup').style.display = 'none';
}
// Function to update countdown and disable the buttons
function updateCountdown() {
countdownSeconds--;
document.getElementById('countdown').innerText = 'Closing in ' + countdownSeconds + ' seconds...';
if (countdownSeconds <= 0) {
closePopup();
disableButtons();
}
}
// Function to disable the buttons
function disableButtons() {
document.getElementById('joinButton').disabled = true;
document.getElementById('closeButton').disabled = true;
}
// Start the countdown timer
setInterval(updateCountdown, 1000);
</script>
To implement the functionality on your Blogger blog, follow these steps:
1. Open Blogger:
- Log in to your Blogger account.
2. Go to 'Layout' and click on 'Add a Gadget':
- Navigate to the 'Layout' section of your Blogger dashboard.
- Click on 'Add a Gadget' .
3. Select 'HTML/Javascript Gadget':
- From the list of available gadgets, select the 'HTML/Javascript' gadget.
4. Paste the provided code directly into the gadget:
- Copy the provided code snippet.
- Paste the code directly into the 'HTML/Javascript' gadget.
5. Save the gadget and visit your blog to see live changes:
- Save the changes made to the gadget.
