Creating a SafeLink Generator on Blogger Page in Few Minutes

ICTSATHI.COM
ICTSATHI.COM
March 30, 2025
0

Safelinks are a common practice in the download-oriented blogging world, acting as a buffer between direct file links and your readers. They help monetize your content, protect against direct link theft, and often provide a layer of security. However, manually editing your Blogger template for every safelink can be tedious and prone to errors. Thankfully, there are ways to add safelinks to your Blogger download posts without directly modifying your template's HTML.

This blog post will guide you through adding a fully functional SafeLink generator to your Blogger page, allowing you to monetize your download links.

1. Create a New Blogger Page

  • Log in to your Blogger account.
  • In the left-hand menu, click "Pages."
  • Click "New Page."
  • Change the compose view to HTML view.
  • LIVE DEMO

2. Paste the HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>SafeLink Generator</title>

    <style>

        .hidden { display: none; }

        .center { text-align: center; margin-top: 20px; }

        .ads, .ad-slot { 

            margin: 20px auto; 

            width: 100%; 

            max-width: 300px; 

            height: 250px; 

            background-color: #f0f0f0; 

            border: 1px solid #ccc; 

            cursor: pointer;

            border: 2px solid #000; /* Added outer border */

        }

        .ad-slot { 

            width: 100%; 

            max-width: 230px; 

            height: 50px; 

            border: 2px solid #000; /* Added outer border */

        }

        .hidden-title { display: none; }

        .button {

            display: inline-block;

            padding: 10px 20px;

            font-size: 16px;

            cursor: pointer;

            text-align: center;

            color: #fff;

            background-color: #007bff;

            border: none;

            border-radius: 5px;

            text-decoration: none;

            transition: background-color 0.3s;

            width: 80%;

            max-width: 200px;

            margin: 10px;

            white-space: nowrap; /* Ensure button text is in a single line */

            min-width: 150px; /* Set minimum width to prevent wrapping */

        }

        .button:hover {

            background-color: #0056b3;

        }

        .button:active {

            background-color: #004494;

        }

        .fa-cloud-download, .fa-shield, .fa-info-circle {

            margin-right: 5px;

        }

        #generator {

            display: none;

        }

        .timer-box {

            display: inline-block;

            padding: 10px;

            border: 1px solid #007bff;

            border-radius: 5px;

            color: #007bff;

            text-align: center;

            font-size: 18px;

            margin-top: 10px;

            width: 150px; /* Set width to match button */

            cursor: pointer;

        }

        .password-container {

            padding: 20px;

            border: 2px solid #007bff;

            border-radius: 10px;

            max-width: 300px;

            margin: 20px auto;

            background-color: #f9f9f9;

        }

        .step-label-container {

            display: inline-flex;

            align-items: center;

            margin-bottom: 10px;

        }

        .step-label {

            color: red;

            font-size: 18px;

            font-weight: bold; /* Make text bold */

            display: inline-block;

        }

        .icon-info {

            display: inline-flex;

            align-items: center;

            margin-left: 5px; /* Reduced margin for tight button */

            margin-top: 0; /* Adjusted margin to fit up and down */

            margin-bottom: 0; /* Adjusted margin to fit up and down */

            cursor: pointer;

            color: #fff;

            background-color: #ff0000;

            vertical-align: middle;

            font-size: 8px; /* Reduced font size for very small button */

            border: 1px solid #ff0000;

            padding: 1px 2px; /* Reduced padding for very small button */

            border-radius: 3px;

        }

        .icon-info i {

            margin-right: 2px; /* Reduced margin for very small button */

        }

        .icon-info:hover {

            background-color: #cc0000;

            border-color: #cc0000;

        }

        .icon-info:active {

            background-color: #990000;

            border-color: #990000;

        }

        .congratulations {

            color: green;

            font-size: 18px;

            margin-top: 10px;

        }

        .popup-box {

            position: relative;

            margin: 20px auto;

            max-width: 800px;

            padding: 20px;

            background-color: #fff;

            border: 2px solid #007bff;

            border-radius: 10px;

            text-align: center;

        }

        .popup-box h2 {

            color: green;

        }

        .popup-box p {

            margin: 10px 0;

        }

        .close-btn {

            position: absolute;

            top: 10px;

            right: 10px;

            background-color: #007bff;

            color: #fff;

            border: none;

            border-radius: 50%;

            cursor: pointer;

            padding: 5px 10px;

            font-size: 14px;

        }

        .close-btn:hover {

            background-color: #0056b3;

        }

        /* Custom CSS to hide the Blogger page or post title on SafeLink page */

        .safelink-page .post-title, .safelink-page .entry-title, .safelink-page .post h3 {

            display: none;

        }

        .safelink-page .hidden-title { /* Hide title on safelink page */

            display: none;

        }



        /* Align ad slots properly */

        .ad-container {

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        /* Responsive styles for the primary ad button */

        @media (max-width: 768px) {

            .ads {

                max-width: 100%;

                height: auto; /* Make primary ad space auto responsive */

            }

            .button {

                padding: 8px 16px;

                font-size: 14px;

                width: auto; /* Ensure button fits text */

                max-width: none; /* Ensure button fits text */

                min-width: 150px; /* Set minimum width to prevent wrapping */

            }

            .timer-box {

                width: 150px; /* Set width to match button */

                font-size: 16px;

            }

        }



        @media (max-width: 480px) {

            .ads {

                max-width: 100%;

                height: auto; /* Make primary ad space auto responsive */

            }

            .button {

                padding: 6px 12px;

                font-size: 12px;

                width: auto; /* Ensure button fits text */

                max-width: none; /* Ensure button fits text */

                min-width: 150px; /* Set minimum width to prevent wrapping */

            }

            .timer-box {

                width: 150px; /* Set width to match button */

                font-size: 14px;

            }

        }

        .responsive-ad {

            width: 100%;

            max-width: 728px; /* Maximum width for larger screens */

            height: auto;

            margin: 20px auto;

            background-color: #f0f0f0;

            border: 1px solid #ccc;

        }

    </style>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <script>

        let reduceStepClickCount = 0;



        async function generateLink() {

            let url = document.getElementById('url').value.trim();

            if (!url.startsWith('http://') && !url.startsWith('https://')) {

                url = 'http://' + url;

            }

            const password = document.getElementById('password').value || '';

            const counter = document.getElementById('counter').value || 0;

            const steps = parseInt(document.getElementById('steps').value) || 1;

            const safelink = btoa(url + '|' + password + '|' + counter + '|' + steps + '|1'); // Encoding the link with step 1

            const baseUrl = window.location.origin + window.location.pathname;

            const generatedLink = baseUrl + '?link=' + safelink;

            document.getElementById('generatedLink').value = generatedLink;

            document.getElementById('generatedLinkContainer').classList.remove('hidden');

        }



        function startCounter(count) {

            if (count > 0) {

                document.getElementById('timerBox').innerText = 'Please wait';

                let counter = parseInt(count);

                const interval = setInterval(() => {

                    if (counter > 0) {

                        document.getElementById('timerBox').innerText = counter + ' sec.';

                        counter--;

                    } else {

                        clearInterval(interval);

                        showGetLinkButton();

                    }

                }, 1000);

            } else {

                showGetLinkButton();

            }

        }



        function showGetLinkButton() {

            const step = parseInt(document.getElementById('finalLink').dataset.step);

            const totalSteps = parseInt(document.getElementById('finalLink').dataset.totalSteps);

            let stepText;

            if (step < totalSteps) {

                stepText = `Step ${step} (${totalSteps - step} remaining)`;

            } else {

                stepText = 'Final Step';

            }

            document.getElementById('stepLabel').innerText = stepText;

            document.getElementById('reduceStepIcon').classList.remove('hidden');

            document.getElementById('timerBox').innerHTML = '<i class="fa fa-shield"></i> Get Link';

            document.getElementById('timerBox').onclick = () => {

                const password = document.getElementById('finalLink').dataset.password;

                if (password) {

                    document.getElementById('passwordPrompt').classList.remove('hidden');

                    document.getElementById('passwordPrompt').scrollIntoView({ behavior: 'smooth' });

                } else {

                    proceedToNextStep();

                }

                document.getElementById('timerBox').classList.add('hidden');

            };

        }



        function verifyPassword() {

            const enteredPassword = document.getElementById('enteredPassword').value;

            const correctPassword = document.getElementById('finalLink').dataset.password;

            if (enteredPassword === correctPassword) {

                document.getElementById('passwordPrompt').classList.add('hidden');

                proceedToNextStep();

            } else {

                alert('Incorrect password. Please try again.');

            }

        }



        function proceedToNextStep() {

            const url = document.getElementById('finalLink').dataset.url;

            const password = document.getElementById('finalLink').dataset.password;

            const counter = document.getElementById('finalLink').dataset.counter;

            const totalSteps = parseInt(document.getElementById('finalLink').dataset.totalSteps);

            const step = parseInt(document.getElementById('finalLink').dataset.step) + 1;



            if (step <= totalSteps) {

                const safelink = btoa(url + '|' + password + '|' + counter + '|' + totalSteps + '|' + step); // Encoding the link with the next step

                const baseUrl = window.location.origin + window.location.pathname;

                const generatedLink = baseUrl + '?link=' + safelink;

                window.location.href = generatedLink;

            } else {

                document.getElementById('getLinkContainer').classList.remove('hidden');

                document.getElementById('getLinkContainer').scrollIntoView({ behavior: 'smooth' });

            }

        }



        function onPageLoad() {

            const urlParams = new URLSearchParams(window.location.search);

            const link = urlParams.get('link');

            if (link) {

                const [url, password, counter, totalSteps, step] = atob(link).split('|'); // Decoding the link

                document.getElementById('finalLink').dataset.url = url;

                document.getElementById('finalLink').dataset.password = password;

                document.getElementById('finalLink').dataset.counter = counter;

                document.getElementById('finalLink').dataset.totalSteps = totalSteps;

                document.getElementById('finalLink').dataset.step = step;

                document.getElementById('ads').classList.remove('hidden');

                startCounter(counter);

                document.body.classList.add('safelink-page'); // Add class to body for SafeLink page styles

            } else {

                document.getElementById('generator').style.display = 'block';

            }

        }



        function adClicked() {

            const totalSteps = parseInt(document.getElementById('finalLink').dataset.totalSteps);

            const reducedSteps = Math.ceil(totalSteps / 2);

            document.getElementById('finalLink').dataset.totalSteps = reducedSteps;

            document.getElementById('popupBox').innerHTML = `

                <h2>Congratulations!</h2>

                <p>You have clicked on an ad. The number of steps has been reduced by 50%.</p>

                <p>This SafeLink page uses a step mechanism to ensure safe and secure redirection to your desired link. The total number of steps is determined by the user during link generation. Clicking on ads will reduce the number of steps by 50%, allowing you to reach your destination faster. Thank you for your support!</p>

                <button class="close-btn" onclick="closePopup()">X</button>

            `;

            document.getElementById('popupBox').classList.remove('hidden');

        }



        function showReduceStepInfo() {

            reduceStepClickCount++;

            if (reduceStepClickCount % 2 === 1) {

                document.getElementById('popupBox').innerHTML = `

                    <h2>Reduce Step Information</h2>

                    <p>If you click on ads, the number of steps to reach your final destination will be reduced by 50%. This helps support our service while providing you a faster route to your link.</p>

                    <button class="close-btn" onclick="closePopup()">X</button>

                `;

                document.getElementById('popupBox').classList.remove('hidden');

            } else {

                document.getElementById('popupBox').classList.add('hidden');

            }

        }



        function closePopup() {

            document.getElementById('popupBox').classList.add('hidden');

        }



        function copyLink() {

            const link = document.getElementById('generatedLink');

            link.select();

            link.setSelectionRange(0, 99999); // For mobile devices

            document.execCommand('copy');

            alert('Link copied to clipboard: ' + link.value);

        }



        function getLink() {

            const url = document.getElementById('finalLink').dataset.url;

            window.open(url, '_blank');

        }

    </script>

</head>

<body onload="onPageLoad()">

    <div id="safelinkGenerator" class="center">

        <h1 class="hidden-title">SafeLink Generator</h1>

        <div id="generator">

            <input type="text" id="url" placeholder="Enter URL" required><br><br>

            <input type="password" id="password" placeholder="Enter Password (Optional)"><br><br>

            <input type="number" id="counter" placeholder="Enter Counter in Seconds (Optional)"><br><br>

            <input type="number" id="steps" placeholder="Enter Number of Steps" min="1" max="10" value="1" required><br><br>

            <button class="button" onclick="generateLink()">Generate Link</button><br><br>

            <div id="generatedLinkContainer" class="hidden">

                <input type="text" id="generatedLink" readonly><br><br>

                <button class="button" onclick="copyLink()">Copy Link</button>

            </div>

        </div>

        <div id="ads" class="hidden">

            <div class="ads" onclick="adClicked()">Ad Space 1</div>

            <div class="ad-container">

                <div class="ad-slot" onclick="adClicked()">Ad Space 2 (230x50)</div>

            </div>

            <div class="step-label-container">

                <div id="stepLabel" class="step-label"></div>

                <div class="icon-info hidden" id="reduceStepIcon" onclick="showReduceStepInfo()">

                    <i class="fa fa-info-circle"></i> Reduce Step

                </div>

            </div>

            <div id="popupBox" class="popup-box hidden"></div>

            <br>

            <div id="timerBox" class="timer-box"></div>

            <br>

            <div class="ad-slot" onclick="adClicked()">Ad Space 3 (230x50)</div>

            <div class="ads" onclick="adClicked()">Ad Space 4</div>

        </div>

        <div id="passwordPrompt" class="hidden password-container">

            <input type="password" id="enteredPassword" placeholder="Enter Password"><br><br>

            <button class="button" onclick="verifyPassword()">Submit</button>

        </div>

        <div id="getLinkContainer" class="hidden">

            <button class="button" onclick="getLink()"><i class="fa fa-cloud-download"></i> Get Link</button>

        </div>

        <div id="finalLink" class="hidden" data-url="" data-password="" data-counter="" data-totalSteps="" data-step="">

            <a href="#" target="_blank">Go to Link</a>

        </div>

        <div class="responsive-ad">

            <!-- Your responsive ad code here -->

        </div>

    </div>

</body>

</html>
</div>

Key Featuress

  1. URL Input Field: Allows users to input the URL they want to generate a safe link for.
  2. Password Protection: Optional field for users to add a password to the generated safe link.
  3. Counter/Timer: Optional field to set a countdown timer before the link becomes accessible.
  4. Step Mechanism: Allows users to generate a link that requires multiple steps to access, enhancing security.
  5. Ads and Ad Spaces:
    • Primary Ad Space: Display ads to generate revenue, with responsiveness for different devices.
    • Additional Ad Slots: Smaller ad slots within the page.
  6. Generated Link Display: Shows the generated safe link to the user with a copy button.
  7. Get Link Button: Button to proceed to the final destination link, with responsive design to fit in a single line.
  8. Click Tracking and Rewards: Tracks ad clicks and reduces the number of steps required to access the final link.
  9. Popup Messages: Displays messages when ads are clicked, with a close button to hide the popup.
  10. Password Prompt: If a password is set, prompts the user to enter it before proceeding.
  11. SEO Tips Section: Provides SEO strategies and tips to boost website ranking.
  12. Responsive Design: Ensures the page is usable on both desktop and mobile devices.
  13. Responsive Ad Unit: Additional responsive ad unit after the main content.

In essence, this code provides a comprehensive solution for creating and managing SafeLinks on your Blogger page, combining security, monetization, and user-friendliness.


Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)

buttons=(Accept !) days=(30)

Our website uses cookies to enhance your experience. Learn More about our cookie policy.
Accept !
To Top