In this blog, I am going to share how to create a multi-page safelink on the Blogger website. Just follow the steps below. If you have any issues just comment in this blog and I will be glad to help you out.
Step 1: Log in to Blogger Dashboard and create 3 new pages. One of these pages is for safelink generation and the other 2 are for redirection. You can name anything to these pages, just make sure to replace your actual URL with the code I have marked.
Step 2: Paste the following code to the Safelink Generator page.
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
#popup {
display: none;
background-color: #4CAF50;
color: white;
padding: 10px;
position: fixed;
bottom: 20px;
right: 20px;
border-radius: 5px;
}
</style>
<div class="container">
<h1>Safelink Generator</h1>
<input type="text" id="inputLink" placeholder="Enter your URL here">
<button class='button' id="generateBtn">Generate Safelink</button>
<input type="text" id="outputLink" readonly>
<button class='button' id="copyBtn">Copy</button>
<div id="popup">Text Copied</div>
</div>
<script>
document.getElementById('generateBtn').addEventListener('click', function() {
const inputLink = document.getElementById('inputLink').value;
const safelink = generateSafelink(inputLink);
document.getElementById('outputLink').value = safelink;
});
document.getElementById('copyBtn').addEventListener('click', function() {
const outputLink = document.getElementById('outputLink');
outputLink.select();
document.execCommand('copy');
showPopup();
});
function generateSafelink(inputLink) {
const encodedLink = btoa(inputLink);
return `https://yoursite.blogspot.com/p/human-check.html?url=${encodedLink}`;
}
function showPopup() {
const popup = document.getElementById('popup');
popup.style.display = 'block';
setTimeout(() => {
popup.style.display = 'none';
}, 3000);
}
</script>
Step 3: Paste the following code to the Human Verification page.
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
#goButton {
margin: 0 auto;
display: block;
}
</style>
<div class="container" id="humanCheckContainer">
<p id="waitMessage">Please wait...</p>
<p id="countdownMessage" style="display:none;">Please wait <span id="countdown">3</span> seconds...</p>
<button class='button' id="goButton" style="display:none;">GO</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const params = new URLSearchParams(window.location.search);
const encodedUrl = params.get('url');
if (!encodedUrl) {
document.getElementById('humanCheckContainer').innerHTML = '';
return;
}
const destinationUrl = atob(encodedUrl);
setTimeout(() => {
document.getElementById('waitMessage').style.display = 'none';
document.getElementById('countdownMessage').style.display = 'block';
let countdown = 3;
const countdownElement = document.getElementById('countdown');
const countdownInterval = setInterval(() => {
countdown -= 1;
countdownElement.textContent = countdown;
if (countdown === 0) {
clearInterval(countdownInterval);
document.getElementById('goButton').style.display = 'block';
}
}, 1000);
}, 3000);
document.getElementById('goButton').addEventListener('click', function() {
window.location.href = `/p/security.html?url=${encodedUrl}`;
});
});
</script>
Step 4: Paste the following code to the Security Page.
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
#goButton {
margin: 0 auto;
display: block;
}
</style>
<div class="container" id="securityCheckContainer">
<p id="waitMessage">Please wait...</p>
<p id="countdownMessage" style="display:none;">Please wait <span id="countdown">3</span> seconds...</p>
<button class='button' id="goButton" style="display:none;">GO</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const params = new URLSearchParams(window.location.search);
const encodedUrl = params.get('url');
if (!encodedUrl) {
document.getElementById('securityCheckContainer').innerHTML = '';
return;
}
const destinationUrl = atob(encodedUrl);
setTimeout(() => {
document.getElementById('waitMessage').style.display = 'none';
document.getElementById('countdownMessage').style.display = 'block';
let countdown = 3;
const countdownElement = document.getElementById('countdown');
const countdownInterval = setInterval(() => {
countdown -= 1;
countdownElement.textContent = countdown;
if (countdown === 0) {
clearInterval(countdownInterval);
document.getElementById('goButton').style.display = 'block';
}
}, 1000);
}, 3000);
document.getElementById('goButton').addEventListener('click', function() {
window.location.href = destinationUrl;
});
});
</script>
If you are using any other template than Plus UI then add the following code inside the <style> tag.
.button {
display: inline-flex;
align-items: center;
margin: 10px 0;
padding: 12px 15px;
outline: 0;
border: 0;
border-radius: 25px;
line-height: 20px;
color: #fffdfc;
background: #ff0033;
font-size: 14px;
/*font-family: Roboto;
*/
white-space: nowrap;
overflow: hidden;
max-width: 320px
}
If you need any help then you can join our Telegram Group.
