How to Create Multi Page Safelink on Blogger

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.