Cách tạo trang Safelink trên Template Plus UI v3.2

Cách tạo trang Safelink trên Template Plus UI v3.2

Safelink là gì? Vì sao cần dùng cho website?

Trong thời đại mà việc click vào liên kết ngoài tiềm ẩn nhiều rủi ro về bảo mật, Safelink là giải pháp lý tưởng cho các Blogger. Safelink là một tính năng bảo vệ và quản lý các liên kết đi bằng cách chuyển hướng người dùng qua một trang trung gian trước khi đến đích cuối cùng. Tính năng này giúp cải thiện bảo mật, kiểm soát lưu lượng truy cập bên ngoài. Tính năng này đảm bảo việc duyệt web an toàn hơn cho người dùng và cung cấp cho Blogger tính linh hoạt và cơ hội kiếm tiền cao hơn khi xử lý các liên kết bên ngoài.

Safelink được tích hợp trong phiên bản mới nhất của Template Plus UI v3.2, cho phép bạn:

1. Bảo vệ người dùng khỏi liên kết độc hại
2. Tăng thời gian người dùng ở lại blog
3. Tạo điểm trung gian để hiển thị quảng cáo
4. Theo dõi và phân tích lưu lượng truy cập link ngoài

Hướng dẫn cài đặt tiện ích Safelink trên Plus UI

Bước 1: Bật tiện ích Safelink

1. Đăng nhập vào trang quản trị Blogger của bạn, sau đó chuyển đến menu Chủ đề (Theme)
2. Trong menu này nhấp vào nút TÙY CHỈNH (Customize)
3. Trong trang Tùy chỉnh có 3 Tab ( Nền, Nâng cao, Tiện ích ), bạn hãy nhấp vào Tab Nâng Cao
4. Trong danh sách tùy chọn thả xuống "Style: Status Bar ▼", nhấp vào vào kéo chọn Plugin: Safelink (Experimental)
5. Thay đổi chiều dài các tiện ích Safelink thành 2px ( Enable ) để bật tính năng này
6. Sau khi chỉnh sửa nhấp vào biểu tượng ( Bên dưới góc phải màn hình ) để Lưu lại thiết lập

Bước 2: Cấu hình trang Safelink

Bây giờ bạn cần cấu hình ít nhất một trang Safelink. Trang Safelink là trang mà người dùng sau khi nhấp vào liên kết đã thiết lập sẽ được chuyển hướng đến, khi truy cập hệ thống sẽ yêu cầu người dùng thực hiện một số hành động để có được liên kết gốc. Trong trang này bạn có thể tạo một blog giới thiệu về vấn đề nào đó và có thể chèn thêm đoạn mã quảng cáo để tăng thu nhập. Sau khi đã có trang Safelink bạn cần cấu hình cho tiện ích tự động truy cập vào trang vừa tạo thông qua Theme HTML Editor.

1. Đăng nhập vào trang quản trị Blogger của bạn, sau đó chuyển đến menu Chủ đề (Theme).
2. Trong menu này nhấp vào biểu tượng ▼ bên phải nút Tùy chỉnh (Customize), rồi chọn Chỉnh sửa HTML.
3. Tìm đoạn mã sau và đặt liên kết trang của bạn vào các phần được đánh dấu. Không bắt buộc phải đặt liên kết của cả 4 trang, ít nhất một trong số chúng phải có:

   Bạn chỉ cần lấy đường dẫn của trang thay vì url đầy đủ. Ví dụ, nếu bạn muốn bao gồm , chỉ cần đặt:https://www.example.com/p/my-safelink-page.html/p/my-safelink-page.html

   <Variable name="safelink.page1" description="Safelink Page 1" type="string" default="" value="/p/my-safelink-page.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

Bước 3: Gắn Safelink cho liên kết bên ngoài

Bạn chỉ cần thêm thêm classname safeLvào các phần tử để tự động đặt liên kết sử dụng tính năng safelink. Ví dụ: <a>

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

Bạn cũng có thể sử dụng phần tử như hiển thị bên dưới: <button>

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

Tạo Safelink thủ công

Tiện ích Safelink Generator cho phép bạn tạo safelink từ liên kết gốc một cách thủ công, bạn có thể thiết lập tính năng này chạy trong các bài viết đã đăng và cả các trang trên Blogger của bạn.

1. Đăng nhập vào trang quản trị Blogger của bạn, sau đó chuyển đến menu Trang (Pages)
2. Tạo một trang mới và chuyển về Chế độ xem HTML
3. Sao chép và dán đoạn mã sau vào.

   <!--[ 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 ]-->
   

4. Bạn nên thêm đoạn mô tả trang phía trên đoạn mã đã cho. Và nhấp vào Đăng để xuất bản trang

Tối ưu Safelink cho SEO & Thu nhập

1. Thêm mã Google AdSense trong trang chuyển hướng để tăng doanh thu
2. Tùy chỉnh nội dung trang Safelink để giữ chân người dùng
3. Tối ưu tiêu đề và mô tả trang chuyển để Google lập chỉ mục tốt hơn
4. Kết hợp với các công cụ phân tích (như Google Analytics) để theo dõi hành vi người dùng

Kết luận

Safelink không chỉ là lớp bảo mật phụ trợ mà còn là công cụ tăng trưởng cho blog nếu được sử dụng hợp lý. Đặc biệt với giao diện Plus UI từ phiên bản 3.2 trở lên, việc tích hợp và triển khai Safelink chưa bao giờ dễ dàng đến thế.
Hãy thử cấu hình và trải nghiệm — bạn sẽ thấy nó đáng giá cho cả bảo mật, SEO và kiếm tiền!

Share:
www.themewiky.com