Cách làm trang chuyển hướng khỏi Blog cho Blogger

Bài viết gốc được đăng tại trang JUNO_OKYO's Blog : https://www.junookyo.com/2019/12/lam-trang-chuyen-huong-khoi-blog.html 

Truy cập ngày 27/01/2022, soạn bài 27/01/2022, duyệt đăng 28/01/2022

Bài viết được đăng lại nhằm mục đích học hỏi và chia sẻ, bản quyền thuộc Mạnh Tuấn - JUNO_OKYO

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

Ảnh thành quả, nguồn: JUNO_OKYO's Blog (T. Mạnh Tuấn Team Leader)

Vào Blogger Dashboard (màn hình chính) > Pages (Trang) > Create New Page (Tạo trang) là nút màu cam ở dưới góc phải. Chuyển qua chế độ xem 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>

và lưu trang lại!

Giải thích từng dòng, đầu tiên tớ tạo một nút với ID là “redirect-btn” (nút chuyển hướng). 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 nút đã tạo.

Sau khi 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 liên kết

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 (tên miền) 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")));

Đ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ì nhờ nó kết quả tìm kiếm của URL đích mới không bị Bot lập chỉ mục nên đây là một cách bảo vệ thành quả SEO của bạn rất tốt!

Và OK, sau khi thêm đoạn code trên thì bạn lưu lại giao diện của Blog 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 nhé, cũng 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! Hãy làm nổi bật trang Redirect!