How to Install Safelink In Plus UI v3.2.0 Template on Blogger

Safelink plugin was added in Plus ui v3.2, therefore you will be able to enable it if and only if you are using Plus ui v3.2.0 or above.

Info! Demo of this Safelink feature can be found at Safelink Generator page.

What is Safelink and Why You Should Use It on Your Blog (2025 Guide)

Safelink is a powerful tool that protects and manages outgoing links by redirecting users through a secure intermediate page before they reach the final destination. This feature is widely used by bloggers and website owners to enhance link security, prevent spam, and control how users access external sites. With Safelink, you can display ads, countdown timers, or warning messages, giving you a chance to monetize outgoing traffic while improving user safety. It's an excellent way to boost your blog’s SEO, increase engagement, and maintain full control over external link redirection. A must-have for anyone using Blogger SEO tools or running a high-traffic blog..

Also Read:- Best adsense aproval templates for blogger 

How to Configure Safelink on Your Blogger Website

To start using the Safelink feature, you’ll need to set it up properly. The first step is to enable the Safelink plugin through your Theme Designer or HTML Theme Editor. This plugin is essential for redirecting external links through a protected page, which helps you secure your outbound traffic, display ads or timers, and even boost your blog’s monetization. Once the plugin is enabled, you can customize how Safelink works—like setting the redirection style, delay time, and what content shows before the user reaches the final link.

1. Go to Blogger Theme Designer.
2. Click on Advanced tab.
3. From dropdown selection list, select Plugin: Safelink (Experimental).
4. Set the length of Safelink to 2px in order to enable it.

To get started, you need to set up at least one Safelink page. This is an important step because whenever someone clicks on an external link, they’ll first be redirected to this Safelink page. There, they may be asked to perform simple actions like waiting a few seconds, clicking a button, or verifying they’re not a robot. Once done, they'll be taken to the original destination link. You can easily create and customize this Safelink page by going into your blog’s Theme HTML Editor and editing the code as needed.

1. Go to Blogger HTML Editor.
2. Find the following code snippet and put your page link at marked parts. It is not mandatory to put all four pages' link, at-least one of them should be there:

   Warning!
   You have to put only pathname of the page instead of full url. For an example, if you want to include /p/my-safelink-page.html, only put /p/my-safelink-page.html.

   <Variable name="safelink.page1" description="Safelink Page 1" type="string" default="" value="/p/safelink-page-1.html"/>
   [!] Safelink Page 1
   [!] @type {String}
   [!] Warning: Don't add full url of the safelink page, only include the pathname
   
   <Variable name="safelink.page2" description="Safelink Page 2" type="string" default="" value=""/>
   [!] Safelink Page 2
   [!] @type {String}
   [!] Warning: Don't add full url of the safelink page, only include the pathname
   
   <Variable name="safelink.page3" description="Safelink Page 3" type="string" default="" value=""/>
   [!] Safelink Page 3
   [!] @type {String}
   [!] Warning: Don't add full url of the safelink page, only include the pathname
   
   <Variable name="safelink.page4" description="Safelink Page 4" type="string" default="" value=""/>
   [!] Safelink Page 4
   [!] @type {String}
   [!] Warning: Don't add full url of the safelink page, only include the pathname

Safelink from Anchor

You can add a classname safeLto <a> elements to automatically put the link behind safelink feature. An example is:

<a class='button safeL' href='link_here'>title_here</a>

If you want, you can also use a <button> element like this:

This gives you another way to let users interact with your Safelink page. It can be helpful if you want to create a cleaner, more clickable design instead of using a standard link.

<button type='button' class='button safeL' data-href='link_here'>title_here</button>

Safelink Generator – Create Protected Links Easily

The Safelink Generator helps you turn any original URL into a secure safelink. This tool lets you redirect users through an intermediate page before they reach the final destination. You can place the generator on an existing page of your blog or create a brand new page just for it. It’s a simple way to protect outbound links, control traffic flow, and even monetize clicks by showing ads or messages before redirection.

1. In page editor view, click ✏️icon at the bottom right of the title.
2. Two options will appear: <HTML> view and Writing view.
3. Select '<HTML View>.
4. Copy and paste following code.

    <!--[ Begin: Safelink Generator area ]-->
   <style>
   .inF.cB button{--svgW:16px;--svgH:16px;position:absolute;inset-block-start:10px;inset-inline-end:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--contentB);border-radius:8px;border:1px solid var(--contentLa);opacity:0.5;cursor:pointer}
   .inF.cB input{padding-inline-end:50px}
   .inF.cB input:not(:placeholder-shown) ~ button{opacity:1}
   .sgMw{max-width:600px;margin:40px auto}
   .sgOw{display:flex;align-items:center;gap:12px 8px;flex-wrap:wrap;background:var(--contentB);border:1px solid var(--contentL);border-radius:5px;padding:12px}
   .sgOw span{width:100%;line-height:1.4em;font-size:14px}
   .sgOw button{--svgW:20px;--svgH:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;background:var(--linkB);color:#fffdfc;border-radius:8px;cursor:pointer}
   </style>
   <script>
   /*! Plus UI Javascript (safelink/generator.js) | Authors: Deo Kumar, Armaan Kumar (https://fineshopdesign.com) | License: Unlicensed | Copyright (c) 2024-2025 Fineshop Design */
   "use strict";((e,t,l)=>{let{cEl:n,iAE:a,aEL:s,qSel:i,gId:p,eHTML:o,tNtf:g,df:c,pl:u,bg:r}=e,d=e=>(e=>new URL(e,l.baseURI))((e=>e.replace(/(^\w+:|^)/,""))(e)),h=(t,l,n="s")=>{let a=(t=>{let l=JSON.stringify(t);return{decoded:t,value:l,data:e.B64.O3.e(l)}})(l);return t+`#${n}=${encodeURIComponent(a.data)}`},v=u.sl,b=v.pg.map(e=>new URL(e,r.cnHmU).href),f=l.currentScript,C=[];v.ok||C.push("The Safelink plugin is not enabled. The generated links will not work until it is enabled."),0===b.length&&C.push("No Safelink page has been configured!");let k=n("div",{className:"sgMw",innerHTML:`${0!==C.length?`<div class='alert warning'><b>Warning!</b>${C.map((e,t)=>`${t+1}. ${e}`).join("<br>")}</div>`:""}<div class='inF cB' data-message='URL must begin with http:// or https://'><input type='text' name='link' id='sg_f_link' placeholder=' '><label for='sg_f_link'>Destination URL</label><button type='button' id='sg_f_clear_link'><svg class='line' viewBox='0 0 24 24'><path d='M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999'></path></svg></button></div><div class='inF' data-message='Select a page for safelink'><select id='sg_f_page'><optgroup label='Static pages'><option value='${o(r.cnHmU)}'${0===b.length?" selected":""}>Homepage</option></optgroup>${0!==b.length?`<optgroup label='Safelink Pages'>${b.reduce((e,t,l)=>`${e}<option value='${o(t)}'${0===l?" selected":""}>Safelink Page (${o(v.pg[l])})</option>`,"")}</optgroup>`:""}</select><label for='sg_f_page'>Safelink Page</label></div><div class='sgOw'><span class='sgOl'></span><button type='button' class='sgOv'><svg class='line' viewBox='0 0 24 24'><path d='M15.58 12C15.58 13.98 13.98 15.58 12 15.58C10.02 15.58 8.42004 13.98 8.42004 12C8.42004 10.02 10.02 8.42004 12 8.42004C13.98 8.42004 15.58 10.02 15.58 12Z'></path><path d='M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z'></path></svg></button><button type='button' class='sgOc'><svg class='line' viewBox='0 0 24 24'><path d='M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z'></path><path d='M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z'></path></svg></button></div>`});a(f,"beforebegin",k);let $=p("sg_f_link"),_=p("sg_f_clear_link"),m=p("sg_f_page"),w=i(".sgOl",k),H=i(".sgOv",k),L=i(".sgOc",k),U=()=>{if(!e.B64)return null;let t=$.value.trim();return""===t?null:(/^https?:\/\//.test(t)||(t=`https://${t}`),h(m.value,{v:1,u:t}))},M=()=>{let e=U();w.innerText=e||"Input a valid Destination URL first!"};M(),s($,"change",M),s($,"input",M),s($,"keyup",M),s(m,"change",M),s(m,"input",M),s($,"blur",()=>{let e=$.value.trim();""!==e&&(/^https?:\/\//.test(e)?$.value!==e&&($.value=e):$.value=`https://${e}`)}),s(_,"click",()=>{$.value="",M()}),s(H,"click",()=>{let e=U();e?t.open(e,"_blank"):g(w.textContent)}),s(L,"click",()=>{let t=U();t?e.cpT(t).then(()=>g("Link copied to clipboard!")):g(w.textContent)}),c.then(()=>{M(),e.iBF().then(async e=>{let t=new e(d(r.cnHmU)),[l,a]=await Promise.all([t.posts.list(),t.pages.list()]);[["Recent Posts",l],["Recent Pages",a]].forEach(([e,t])=>{let l=n("optgroup",{attributes:{label:e},innerHTML:t.reduce((e,t)=>`${e}<option value='${o(t.url)}'>${o(t.title)}</option>`,"")});m.appendChild(l)})})})})(PU,window,document);
   </script>
   <!--[ End: Safelink Generator area ]-->
   

5. It is recommended to add a page description paragraph above the given code.

Final Words

Using a Safelink system on your blog is a smart way to protect your outbound links, improve user security, and even earn extra income through ads or affiliate tools. Whether you're running a tech blog, movie site, or download page, Safelink gives you full control over external redirection. With simple setup steps, customizable pages, and powerful features like the Safelink Generator, you can easily enhance your blog’s performance and user experience. Don’t miss out on this powerful Blogger tool—start using Safelink today and take your blog to the next level.