Safelink plugin was added in v3.2, therefore you will be able to enable it if and only if you are using v3.2.0 or above.
Experimental feature!
Safelink plugin is an experimental feature. We need your feedback to improve it further and make it stable.
Looking for Demo?
Demo of this Safelink feature can be found at Safelink Generator page.
Safelink is a feature that protects and manages outgoing links by redirecting users through an intermediate page before reaching the final destination. It helps improve security, control external traffic, and optionally display additional content such as advertisements, warnings, or timers. This ensures safer browsing for visitors and offers blog owners greater flexibility and monetization opportunities when handling external links.
Configure Safelink
In order to use this feature, you need to setup it first. First thing to do is enable the safelink plugin through Theme Designer:
- Go to Blogger Theme Designer.
- Click on Advanced tab.
- From dropdown selection list, select Plugin: Safelink (Experimental).
- Set the length of Safelink to 2px in order to enable it.
Now you need to configure at-least one Safelink page. Safelink page is the page where user is redirected and asked to perferm few actions in order to get the original link. You can configure safelink pages through Theme HTML Editor.
- Go to Blogger HTML Editor.
-
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:
You have to put only pathname of the page instead of full url. For an example, if you want to include
https://www.example.com/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 safeL to <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 wish, you can also use <button> element as shown below:
<button type='button' class='button safeL' data-href='link_here'>title_here</button>Safelink Generator
The Safelink Generator allows you to create safelink from original link. You can put the generator in an existing page or in a new page.
অন্যান্য পোস্টগুলো পড়ুন
- In page editor view, click icon at the bottom right of the title.
- Two options will appear: HTML view and Writing view.
- Select 'HTML View'.
-
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}=l,d=e=>(e=>new URL(e,t.baseURI))((e=>e.replace(/(^\w+:|^)/,""))(e)),h=(e,t,n="s")=>{let a=(e=>{let t=JSON.stringify(e);return{decoded:e,value:t,data:l.B64.O3.e(t)}})(t);return e+`#${n}=${encodeURIComponent(a.data)}`},v=u.sl,b=v.pg.map((e=>new URL(e,r.cnHmU).href)),f=t.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(!l.B64)return null;let e=$.value.trim();return""===e?null:(/^https?:\/\//.test(e)||(e=`https://${e}`),h(m.value,{v:1,u:e}))},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 t=U();t?e.open(t,"_blank"):g(w.textContent)})),s(L,"click",(()=>{let e=U();e?l.cpT(e).then((()=>g("Link copied to clipboard!"))):g(w.textContent)})),c.then((()=>{M(),l.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)}))}))}))})(window,document,PU); </script> <!--[ End: Safelink Generator area ]--> - It is recommended to add a page description paragraph above the given code.
