Safelink is a useful tool for bloggers and website owners, especially those sharing downloadable content. It helps protect users by checking links for potential threats before they proceed.
Many websites use a separate domain for safelink pages, but this can have limitations. In this guide, we’ll show you how to create a safelink directly on your main blog. This method is simple, effective, and keeps everything in one place.
What is Safelink?
Most of you might already know about safelink, but let’s go over it again. Safelink is a special page on a blog or website that checks if the target URL is safe from viruses and malware. Simply put, it's a transition page before users reach their final destination.
Why Use Safelink?
Safelink is commonly found on download websites. However, many blogs use a separate domain for it. While this works, it has some drawbacks (which we won’t cover here).
To make the most of safelink, we experimented with adding it directly to the main blog. The result? A fully functional safelink system without needing a separate domain.
Safelink Scenario and Benefits
This safelink works like any other, but the difference is that it stays within your main blog. When visitors click a download link, they are first redirected to a safelink page before reaching the actual download page.
Benefits of Using This Safelink
- No need for a new blog or domain. Everything stays on your main blog.
- Easy to customize with full control over design and functionality.
- Increases blog traffic by keeping visitors within your site.
- Improves page rank as higher traffic boosts search engine rankings.
- Reduces bounce rate by keeping users engaged longer.
- Provides extra ad placement opportunities to increase revenue.
- Completely safe since it remains on the same domain.
Potential Drawback
All external links, including social media and other blogs, will be encoded and redirected through the safelink. To prevent this, you need to add specific sites to an exclusion list.
Safelink Tutorial on the Main Blog
This tutorial is divided into two parts. The first part covers creating the safelink page, and the second part involves editing the blog’s source code. This guide is specifically for Blogger users, but users of other platforms can adapt it accordingly.
Step 1 - Creating the Safelink Page
First, create a new page on Blogger. It does not have to be a static page; a regular post page will also work. We assume you already know how to create a page.
Once the page is created, switch to HTML View by clicking the pencil icon at the bottom of the title while editing the page.
To make things easier, we have prepared a safelink page template. Simply copy and paste the HTML code below into your safelink page.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas turpis at purus feugiat, ut vehicula libero suscipit. Maecenas semper dignissim congue. Proin purus arcu, vehicula sit amet eleifend ut, congue imperdiet ante. Etiam sodales vulputate ornare. Vivamus arcu odio, bibendum in neque ac, ultrices varius elit. Mauris est arcu, commodo a tristique vel, suscipit ac nisl. Etiam sagittis diam nec ipsum scelerisque, sit amet venenatis risus cursus. Curabitur convallis ipsum ac facilisis tristique. Aenean ut purus vitae felis suscipit pellentesque. Nunc venenatis non quam ut varius. Donec eu tincidunt libero. Aenean faucibus, mi nec tempor volutpat, velit diam hendrerit dolor, nec vestibulum est augue in lectus. Suspendisse mattis dolor quis nisl congue elementum. Ut pulvinar eu tellus eu hendrerit.</p>
<div class='safelink-button' id='safelink'>
<div class='btnF'>
<div id='safelink-wait'>Please wait...</div>
<script>/*<![CDATA[*/ document.addEventListener("DOMContentLoaded",function(){const e=new URLSearchParams(window.location.search),t=e.get("url"),n=document.getElementById("safelink-wait"),o=document.getElementById("getLink");function r(e,t){const r=document.createElement("button");return r.classList.add("button","safelink-btn"),r.textContent=e,r.id=t,r.style.display="none",r}const a=r("Create Link","create-link-btn"),i=r("Get Link","get-link-btn"),l=document.createElement("div");l.textContent="Please wait 15 sec...",l.style.display="none";function c(){t&&(window.location.href=atob(t))}async function d(e,t,n=""){for(;e>0;)t.textContent=`Please wait ${e} sec...`,t.style.color="red",await new Promise(r=>setTimeout(r,1e3)),e--;t.textContent=n,t.style.color="red"}(async function(){await d(15,n,"Scroll down to continue..."),a.style.display="inline-block",o.appendChild(a),a.addEventListener("click",async function(){a.style.display="none",l.style.display="block",o.appendChild(l),await d(15,l),l.style.display="none",i.style.display="inline-block",o.appendChild(i)}),i.addEventListener("click",c)})()}); /*]]>*/</script>
</div>
</div>
<p>Nam ultrices tempus tempus. Quisque pharetra suscipit leo, sed varius massa lacinia et. Morbi metus massa, sodales nec efficitur sed, tincidunt eu tortor. Cras quis diam sit amet nisi vehicula pretium. Ut scelerisque interdum neque a faucibus. Duis vel urna et magna lacinia egestas ut nec enim. Proin sed nisi sed neque tempus tempus.</p>
<p>Nunc eleifend tristique purus. Fusce viverra pellentesque pharetra. In hac habitasse platea dictumst. Maecenas vel facilisis ligula. Cras venenatis, nulla vitae condimentum facilisis, lectus est congue odio, at luctus orci justo a tortor. Donec nulla lectus, fermentum quis purus vel, tincidunt tincidunt ligula. Aliquam et velit nulla. Praesent sit amet sapien non nibh ornare dictum a vitae nulla. Donec vel mauris ut sapien interdum molestie. Nulla nec rutrum tellus, eget iaculis mi. Ut eu gravida mi. In vehicula posuere finibus. Morbi pretium lacus a lacus ullamcorper feugiat. Donec fermentum risus nec magna elementum luctus.</p>
<p>Aenean nisl felis, semper nec egestas a, venenatis vitae augue. Vivamus iaculis arcu in laoreet sodales. Sed faucibus molestie mi ac finibus. Aliquam hendrerit dignissim lorem. Aenean malesuada nunc a nisi facilisis pellentesque. Vivamus ut ex magna. Phasellus eu ex nunc. Donec nec finibus lacus. Pellentesque eget magna sit amet tortor aliquam commodo. Duis porta congue nisl, ac efficitur metus feugiat et. Nam nec lacus lectus. Aliquam a maximus nisl, at blandit purus. In hac habitasse platea dictumst.</p>
<div class='btnF'>
<div id="getLink"></div>
</div>
<p>Phasellus placerat felis ac enim malesuada, ac fringilla urna maximus. Maecenas a iaculis massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque rhoncus neque ac ipsum mattis, a luctus justo ornare. Suspendisse venenatis nisi sed porta ullamcorper. Ut sit amet erat libero. Duis vel metus nisl. Maecenas vehicula ullamcorper fermentum. Nulla facilisi. Nullam venenatis eros nec turpis posuere, eget mattis velit elementum. Ut ac feugiat libero. Integer diam dui, cursus sed lobortis nec, facilisis vel nibh. Integer eget massa elementum, sagittis justo vel, aliquam ipsum. Phasellus pharetra urna nibh, ac commodo odio pharetra in. Sed at lobortis quam. Nam faucibus ipsum ac pellentesque lacinia.</p>Explanation
- Place your article content and AdSense code in the marked section. The recommended AdSense size depends on your layout.
- You can customize the button text by changing "Get link", "Please wait...", and other highlighted phrases.
- The number 5 in the code represents the delay time (in seconds) before the target link appears. You can adjust this to make it shorter or longer.
- Modify the countdown text by changing "Link will appear in" and "second" to your preferred wording.
- Ensure your blog supports HTTPS for a better user experience and proper script functionality.
- If you see an error message like "Your HTML cannot be accepted: Broken tag: BUTTON", ignore it by closing the notification.
At this point, the first step is complete. Now, proceed to the next step.
Step 2 - Adding Some CSS and JavaScript Code
This part is a bit complex, so follow the instructions carefully. Even a small mistake can cause the safelink to stop working.
Edit your template in 'Edit HTML' mode. To do this, go to the Theme section and click Edit HTML as shown in the image below.
If needed, back up your template first to avoid errors.
Adding CSS Code
This CSS code helps display the layout on the safelink page created in the initial stage.
/* Safelink */
:root {
--link-outline-color: #48525c ;
--link-bg-color: #204ecf ;
}
.button{display: inline-flex;align-items: center;margin: 15px 15px;padding: 10px 20px;outline: 0;border: 0;border-radius: 2px;color: #fefefe;background-color: var(--link-bg-color);font-size: 14px;white-space: nowrap;overflow: hidden;max-width: 100%;line-height: 2em}
.button.outline{color: var(--link-outline-color);background-color: transparent;border: 1px solid #ebeced}
.button.outline:hover{border-color: var(--link-bg-color)}
.safelink-button, .safelink-create > *{margin: 1.8em 0}
.safelink-button span{display: block;font-size: 12px}
#getLink{margin: 5px 0}
#getLink .button{display: none}
#getLink:target .button{display: inline-flex}You can modify this section, such as changing the text size of the link or adjusting other styles.
In Blogger, CSS code is placed inside the <b:skin>...</b:skin> tag. If you have trouble adding the CSS code there, you can search for </head> and place the CSS code just above it. Make sure to wrap it with <style>...</style>.
The final result will look something like this:
<style>
<!--[ Paste Here Your CSS Code ]-->
</style>
</head>Sometimes, in certain templates, the </head> tag may not be found. Instead, look for similar code like:
</head><!--<head/>--></head>
If you find any of these, place the CSS code just above it.
JavaScript for Redirect ?m=1
Find the </head> tag in your Blogger template. Then, place the following code just above it:
<script>/*<![CDATA[*/(function(){let e=window.location.href;e.includes("?m=1")&&history.replaceState({},document.title,e.split("?m=1")[0]),"http:"===location.protocol&&location.replace(e.replace(/^http:/,"https:"))})();/*]]>*/</script>The code above removes &m=1, which usually appears when a page is accessed on mobile. If this code is not removed, the safelink may not work properly on mobile devices.
This script also redirects visitors from http to https. If your blog does not support https, you can remove the highlighted part of the code.
var protocol = window.location.protocol.replace(/\:/g,''); if(protocol == 'http'){ var url = window.location.href.replace('http','https'); window.location.replace(url);}Blogs set to HTTP mode will not work properly if accessed via HTTPS. Make sure your blog supports HTTPS to avoid issues.
JavaScript Code to Encode URLs
This script converts all external links on the blog into Base64 format. After adding the script below, all external links will be automatically encoded, as shown in the example.
https://www.itisuniqueofficial.com/p/safelink.html?url=aHR0cHM6Ly9zaG9ydHVybC5hdC9KYW1MYQ==The easiest way to add JavaScript code is by placing it before the </body> tag.
Find the </body> tag, usually at the bottom of the template, and paste the JavaScript code right before it.
/*! SafeLink - External Link Protector | Description: Protects external links using a timer-based redirection system. | Author: It Is Unique Official | Website: https://www.itisuniqueofficial.com | Date: February 04, 2025 | License: MIT */
document.addEventListener("DOMContentLoaded",function(){const e=["theblazetimes.in", "facebook.com","whatsapp.com","twitter.com","x.com","t.me","pinterest.com","linkedin.com","google.com","blogspot.com","blogger.com","gstatic.com","cloudflareinsights.com","youtube.com","cloudflare.com","googletagmanager.com","googlesyndication.com","googleusercontent.com","jsdelivr.net","github.io","itisuniqueofficial.com","github.com"];function t(t){return e.some(e=>t.includes(e))}document.querySelectorAll("a[href^='https']").forEach(e=>{t(e.href)||(e.href=`https://www.itisuniqueofficial.com/p/safelink.html?url=${btoa(e.href)}`,e.rel="noopener noreferrer")})});Replace the marked part in the code with your safelink page URL.
By default, all external links will be redirected to the safelink page. To exclude certain sites, such as your blog's Facebook page, add them to the protected_links section. Separate multiple sites with a comma ( , ).
The <b:if cond='data:view.isSingleItem'> tag ensures that the script only runs on posts and static pages, preventing it from affecting other pages.
Once added, click Save Theme to apply the changes.
Up to this point, your safelink page should be fully set up. If you followed all the steps correctly, we guarantee that the safelink page will work properly.
Please test it by clicking the download link on your blog.
If you have any questions or if something is unclear, feel free to ask through the comments section provided.
Updated!
This article has been updated for easier use and has been tested on other blogs, with 100% success. If you encounter any errors, there may be an issue with how the code was implemented.