Ý tưởng thực hiện
Blogger – không giống như các nền tảng khác như WordPress là cho phép code bằng PHP hoặc các ngôn ngữ web động, mà chỉ cho bạn sử dụng HTML/CSS/JavaScript. Vậy nên ý tưởng của tớ là tạo một đường dẫn của blog với tham số trên URL chứa link đích (link mà ta chuyển hướng tới), sử dụng JavaScript để lấy giá trị của tham số đó và truyền nó vào trong nút bất kỳ trên trang để người dùng nhấn hoặc chuyển hướng luôn tới trang đích bằng JavaScript tùy theo ý muốn của bạn.Bước 1: Tạo trang chuyển hướng
Vào Blogger Dashboard > Pages > Create New Page (nút màu cam ở dưới góc phải). Chuyển qua chế độ viết HTML và dán vào đoạn code sau:<a class="btn btn-success btn-lg disabled" href="https://www.junookyo.com/" id="redirect-btn" rel="noreferrer noopener" target="_blank" disabled>Click here to continue!</a>
<script>((document) => {
let h = document.location.hash,
$btn = document.querySelector('#redirect-btn');
if (h.length > 0 && h.startsWith('#http')) {
try {
let url = new URL(decodeURIComponent(h.substr(1)));
url.searchParams.set('utm_source', 'juno_okyo');
$btn.href = url.href;
} catch (e) {
console.error(e.message);
return;
}
}
let i = 5,
txt = $btn.textContent;
function run() {
$btn.textContent = `${txt} (${i})`;
if (i > 0) {
i--;
setTimeout(run, 1000);
} else {
$btn.textContent = txt;
$btn.removeAttribute('disabled');
$btn.classList.remove('disabled');
}
}
run();
})(document);</script>Giải thích từng dòng, đầu tiên tớ tạo một nút với ID là “redirect-btn”. Tớ muốn người dùng nhấn vào nút này để chuyển hướng. Tiếp theo, tớ dùng JavaScript lấy giá trị của hash (chuỗi sau dấu #), giải mã nó bằng hàm decodeURIComponent() và gán link đã giải mã vào cái nút đã tạo.
Sau khi cái nút đã được chuẩn bị xong, tớ dùng tiếp một đoạn code nhỏ có tác dụng đếm ngược 5 giây, hết thời gian thì cái nút mới có thể nhấn được. Đây chỉ là một mẹo nhỏ để người dùng có thể đọc nội dung đã được chuẩn bị trong trang chuyển hướng của chúng ta trước khi chuyển hướng.
Bước 2: Bắt mọi liên kết ra ngoài Blog
Giờ đã có trang chuyển hướng rồi, việc chúng ta cần làm tiếp là tự động bắt mọi liên kết ra ngoài Blog phải đi qua trang chuyển hướng. Ở đây có 2 cách: thủ công và tự động.Thủ công tức là khi viết bài bạn sẽ tự gắn link chuyển hướng cho các liên kết đó. Nhưng thế thì sẽ rất mất thời gian và công sức. Vậy nên tớ sẽ hướng dẫn tiếp các bạn một cách đơn giản hơn rất nhiều.
Các bạn vào Blogger Dashboard > Theme > Edit HTML (chỉnh sửa mã nguồn giao diện Blog của bạn). Kéo xuống cuối, trước thẻ đóng body và thêm đoạn code JavaScript sau (nhớ sửa domain thành của bạn):
/* Redirector */
(function(b){window.top.location.href.includes("/chuyen-huong-khoi-blog.html")||b.filter(function(a){return!a.hasAttribute("imageanchor")&&!a.href.startsWith("https://www.junookyo.com")&&5<a.href.length}).map(function(a){a.href="https://www.junookyo.com/p/chuyen-huong-khoi-blog.html#"+encodeURIComponent(a.href);a.target="_blank";a.rel="nofollow noopener"})})(Array.from(document.querySelectorAll(".post-body a")));Tác dụng: đoạn code trên sẽ tự động tìm mọi liên kết đi ra ngoài Blog, chuyển chúng thành liên kết chuyển hướng và thậm chí còn thêm thuộc tính nofollow cho bạn luôn. Bạn nào chưa biết tại sao nên thêm nofollow cho các liên kết ngoài thì tự tìm hiểu qua Google nhé, trong bài này tớ chỉ nói về vụ chuyển hướng thôi.
OK sau khi thêm đoạn code trên thì bạn lưu lại giao diện là xong. Về trang chuyển hướng, nếu bạn biết code thì có thể sử dụng CSS và một số thủ thuật điều kiện trong Blogger nếu muốn làm giao diện độc đáo cho trang này nha, không nhất thiết nó phải có giao diện giống như mọi trang khác. Tùy vào khả năng của bạn!