Bài thơ Ngẩn ngơ

Ngẩn ngơ

Em đi dấu cát vu vơ

Đong đưa mây tóc ngủ hờ trên vai

Nghiêng nghiêng chiếc bóng đổ dài

Cho ngôi trường nhỏ tháng ngày ngẩn ngơ.

Tác giả: Bé Ba – Lê Quang Trinh

Ảnh minh họa bài thơ Ngẩn ngơ.

Share:

Đọc thêm

Trăng Lòng Người Yêu – Bài Thơ Của Bé Ba (Lê Quang Trinh)

THƠ TÌNH

Trăng lòng người yêu

Trăng sáng quá - Ô - Trăng lòng lạnh quá
Gió đưa hương - lay động gió mơn man
Hoa đẹp quá và hương hoa thơm quá
Lá mềm lòng, rung rẩy uống - sương tan

Còn em? - E ấp, hiền ngoan
Yêu kiều, tha thướt, dịu dàng hơn hoa.

Tác giả: Bé Ba – Lê Quang Trinh

Ảnh minh họa: Trăng và thơ.

Đôi dòng cảm nhận

Bài thơ mượn hình ảnh ánh trăng, làn gió, hương hoa và giọt sương để gợi lên vẻ đẹp dịu dàng của tình yêu.

Trong cảm nhận của người viết, ánh trăng không chỉ là cảnh vật thiên nhiên mà còn gợi nỗi lòng của một người đang yêu. Giữa khung cảnh thơ mộng, hình ảnh người con gái hiện lên e ấp, hiền ngoan và dịu dàng.

Đó cũng có thể là tâm trạng của một người mang tình yêu trong lòng nhưng chưa dám ngỏ lời, để rồi những rung động trở thành nỗi nhớ và sự thao thức.

Ghi chú: Bài thơ được lưu giữ và trình bày lại từ nội dung đã đăng trước đây trên Blog Vn Chia sẻ. Phần cảm nhận thể hiện cách đọc và cảm xúc của người viết, không phải lời giải thích chính thức của tác giả.

Share:

Đọc thêm

Cách Hiển Thị Bài Viết Mới Nhất Trong Blogger Bằng HTML/JavaScript

Hiển thị bài viết mới nhất trong Blogger là cách giúp người đọc nhanh chóng tìm thấy những nội dung vừa được xuất bản trên blog.

Bạn có thể đặt danh sách này ở thanh bên, cuối trang hoặc một khu vực khác mà theme Blogger cho phép thêm tiện ích.

Trong bài viết này, Blog Vn Chia sẻ hướng dẫn cách tạo một tiện ích HTML/JavaScript hiển thị các bài viết mới nhất mà không cần chỉnh sửa trực tiếp theme XML.

Kết quả sau khi thực hiện

Một danh sách gồm 5 bài viết mới nhất, hiển thị tiêu đề và ngày xuất bản. Bạn có thể thay đổi số lượng bài viết theo nhu cầu.

Nội dung bài viết

1. Phân biệt bài mới nhất và bài cập nhật gần đây
2. Feed bài viết Blogger hoạt động như thế nào?
3. Cách tạo tiện ích bài viết mới nhất
4. Mã HTML/JavaScript để sao chép
5. Cách tùy chỉnh số lượng bài viết
6. Ảnh minh họa từ bài viết gốc
7. Khắc phục lỗi thường gặp
8. Câu hỏi thường gặp

1. Phân biệt bài viết mới nhất và bài viết cập nhật gần đây

Trước khi tạo tiện ích, bạn cần xác định muốn hiển thị bài viết theo ngày xuất bản hay theo ngày cập nhật.

Loại danh sách	Ý nghĩa
Bài viết mới nhất	Ưu tiên bài có ngày xuất bản mới hơn.
Bài viết cập nhật gần đây	Ưu tiên bài vừa được chỉnh sửa hoặc cập nhật.

Ví dụ, một bài viết xuất bản năm 2021 nhưng được cập nhật năm 2026 có thể xuất hiện ở đầu danh sách cập nhật gần đây, dù không phải bài vừa được xuất bản.

Vì vậy, hai danh sách này phục vụ những nhu cầu khác nhau.

2. Feed bài viết Blogger hoạt động như thế nào?

Blogger cung cấp feed để các ứng dụng và tiện ích có thể đọc thông tin về bài viết công khai.

Đường dẫn feed bài viết thường có dạng:

/feeds/posts/default

Nếu muốn lấy bài viết theo một nhãn cụ thể, cấu trúc thường có thêm phần nhãn:

/feeds/posts/default/-/TEN-NHAN

Trong bài hướng dẫn trước, Blog Vn Chia sẻ đã giới thiệu cách hiển thị bài viết theo Label.

Bạn có thể đọc tại:

Cách hiển thị bài viết theo nhãn Label trong Blogger

Ở bài này, chúng ta sử dụng feed của toàn blog để tạo danh sách bài viết mới nhất.

3. Cách tạo tiện ích bài viết mới nhất trong Blogger

Bước 1: Mở Blogger

Đăng nhập tài khoản Blogger và chọn blog cần chỉnh sửa.

Bước 2: Mở phần Bố cục

Trong trang quản trị, chọn:

Blogger → Bố cục

Bước 3: Thêm tiện ích

Tại vị trí muốn hiển thị danh sách bài viết, chọn Thêm tiện ích.

Bước 4: Chọn HTML/JavaScript

Trong danh sách tiện ích, chọn HTML/JavaScript.

Đặt tiêu đề, ví dụ:

BÀI VIẾT MỚI NHẤT

Bước 5: Dán mã

Sao chép toàn bộ mã ở phần tiếp theo và dán vào ô nội dung của tiện ích.

Bước 6: Lưu và kiểm tra

Chọn Lưu, sau đó mở blog để kiểm tra danh sách bài viết.

4. Mã HTML/JavaScript tạo danh sách bài viết mới nhất

Đoạn mã dưới đây sử dụng feed công khai của Blogger để lấy bài viết.

Mặc định tiện ích hiển thị 5 bài và sắp xếp theo ngày xuất bản.

Lưu ý:

Đây là mã dành cho tiện ích HTML/JavaScript trong phần Bố cục, không phải mã để dán trực tiếp vào bài viết đang đọc.

<div id="bvc-recent-posts">
  Đang tải bài viết...
</div>

<script>
(function () {
  "use strict";

  var limit = 5;
  var container = document.getElementById(
    "bvc-recent-posts"
  );

  if (!container) return;

  var feedUrl =
    "/feeds/posts/default" +
    "?alt=json" +
    "&max-results=" + limit +
    "&orderby=published";

  fetch(feedUrl)
    .then(function (response) {
      if (!response.ok) {
        throw new Error("Không tải được feed");
      }

      return response.json();
    })

    .then(function (data) {
      var entries =
        data.feed && data.feed.entry
          ? data.feed.entry
          : [];

      container.textContent = "";

      if (!entries.length) {
        container.textContent =
          "Chưa có bài viết để hiển thị.";
        return;
      }

      var list = document.createElement("ul");

      list.style.paddingLeft = "20px";

      entries.forEach(function (entry) {
        var title = entry.title.$t;
        var url = "";

        entry.link.forEach(function (link) {
          if (link.rel === "alternate") {
            url = link.href;
          }
        });

        if (!url) return;

        var item = document.createElement("li");
        var anchor = document.createElement("a");

        anchor.href = url;
        anchor.textContent = title;

        item.appendChild(anchor);
        list.appendChild(item);
      });

      container.appendChild(list);
    })

    .catch(function () {
      container.textContent =
        "Không thể tải danh sách bài viết.";
    });
})();
</script>

Bạn cần sao chép mã được hiển thị trong khung và dán vào tiện ích HTML/JavaScript của Blogger.

Điểm khác với mã cũ:

Mã này không phụ thuộc vào hàm labelthumbs trong theme và không cần khai báo các biến numposts, showpostthumbnails hoặc numchars.

5. Cách tùy chỉnh số lượng bài viết

Trong mã JavaScript, tìm dòng:

var limit = 5;

Nếu muốn hiển thị 10 bài viết, đổi thành:

var limit = 10;

Không nên hiển thị quá nhiều bài viết trong một khối nhỏ ở thanh bên vì có thể làm trang dài và khó theo dõi.

Muốn hiển thị bài cập nhật gần đây?

Bạn có thể thay:

orderby=published

bằng:

orderby=updated

Tuy nhiên, cần kiểm tra thứ tự trả về thực tế của feed trên blog đang sử dụng, vì khả năng hỗ trợ tham số và cách sắp xếp có thể phụ thuộc vào feed.

6. Ảnh minh họa từ bài viết gốc

Đây là ảnh kết quả hiển thị tiện ích bài đăng gần đây mà Blog Vn Chia sẻ đã đăng trong bài hướng dẫn trước đây.

Ảnh tư liệu: Tiện ích bài đăng gần đây trong giao diện blog trước đây.

7. Khắc phục lỗi thường gặp

Tiện ích chỉ hiển thị “Đang tải bài viết...”

Hãy kiểm tra xem bạn đã dán đủ mã JavaScript và lưu tiện ích hay chưa.

Đồng thời kiểm tra feed của blog có thể truy cập công khai hay không.

Danh sách không hiển thị bài viết

Kiểm tra blog đã có bài viết công khai và không chặn quyền truy cập feed cần sử dụng.

Tiêu đề quá dài

Bạn có thể giảm số lượng bài hiển thị hoặc điều chỉnh CSS của tiện ích.

Tiện ích hiển thị hai lần

Kiểm tra theme đã có khối bài viết mới nhất hay chưa. Nếu có, hãy cân nhắc chỉ giữ một khối phù hợp.

8. Câu hỏi thường gặp

Có cần chỉnh sửa theme XML không?

Không cần đối với cách sử dụng tiện ích HTML/JavaScript được trình bày trong bài này.

Có thể hiển thị 20 bài viết không?

Có thể thay đổi biến limit, nhưng nên cân nhắc không gian hiển thị và trải nghiệm đọc.

Bài viết mới có tự xuất hiện không?

Khi tiện ích tải được feed mới và danh sách được sắp xếp phù hợp, bài viết mới có thể xuất hiện mà không cần sửa danh sách liên kết thủ công.

Có cần Google API key không?

Không. Ví dụ sử dụng feed công khai của Blogger, không dùng Blogger API có xác thực.

Kết luận

Việc hiển thị bài viết mới nhất giúp người đọc nhanh chóng tìm được những nội dung vừa xuất bản trên Blogger.

Với tiện ích HTML/JavaScript, bạn có thể tạo danh sách tự động mà không cần chỉnh sửa theme XML.

Nếu chỉ cần hiển thị danh sách chủ đề, hãy sử dụng tiện ích Nhãn có sẵn. Nếu muốn hiển thị các bài thuộc một chủ đề cụ thể, hãy tham khảo bài hướng dẫn hiển thị bài viết theo Label.

Bài viết liên quan

Cách hiển thị bài viết theo nhãn Label trong Blogger

Cách tạo nút Back to Top cho Blogger

Ghi chú: Bài viết được cập nhật từ hướng dẫn tạo tiện ích bài đăng gần đây của Blog Vn Chia sẻ. Ảnh minh họa gốc được giữ lại làm tư liệu.

Share:

Đọc thêm

Cách Hiển Thị Bài Viết Theo Nhãn (Label) Trong Blogger

Nhãn (Label) trong Blogger giúp phân loại bài viết theo từng chủ đề, để người đọc dễ tìm nội dung liên quan trên blog.

Chẳng hạn, một blog chia sẻ kiến thức có thể sử dụng các nhãn như Microsoft Word, Excel, Thủ thuật Blogger hoặc Dược lâm sàng.

Sau khi gắn nhãn, bạn có thể tạo danh sách nhãn ở thanh bên, thêm liên kết nhãn vào menu hoặc xây dựng một khu vực giới thiệu các bài viết thuộc cùng chủ đề.

Bài viết này hướng dẫn cách thực hiện từng bước trên Blogger và giải thích khi nào nên sử dụng tiện ích có sẵn, khi nào cần thêm HTML hoặc JavaScript.

Nội dung bài viết

1. Label trong Blogger là gì?
2. Cách tạo và gắn nhãn cho bài viết
3. Cách hiển thị danh sách nhãn trên blog
4. Cách hiển thị bài viết theo một nhãn
5. Khi nào cần dùng HTML/JavaScript?
6. Các lỗi thường gặp
7. Câu hỏi thường gặp

1. Label trong Blogger là gì?

Label là nhãn dùng để nhóm các bài viết có nội dung liên quan trên Blogger.

Ví dụ, khi bạn gắn nhãn Microsoft Word cho nhiều bài viết, người đọc có thể mở trang nhãn đó để xem các bài viết thuộc cùng chủ đề.

Một bài viết có thể có nhiều nhãn nếu nội dung thực sự liên quan đến nhiều chủ đề.

Ví dụ:

Bài viết “Cách chỉnh font chữ mặc định trong Word” có thể được gắn nhãn:

Microsoft Word, Thủ thuật Office

Bạn nên sử dụng tên nhãn nhất quán, tránh tạo nhiều nhãn có ý nghĩa gần giống nhau chỉ vì khác cách viết.

2. Cách tạo và gắn nhãn cho bài viết trong Blogger

Bước 1: Đăng nhập Blogger

Truy cập trang quản trị Blogger và chọn blog cần chỉnh sửa.

Bước 2: Mở bài viết

Chọn Bài đăng, sau đó mở bài viết muốn gắn nhãn.

Bước 3: Nhập nhãn

Trong phần cài đặt bài viết, tìm mục Nhãn (Labels).

Nhập tên nhãn mới hoặc chọn nhãn đã có.

Nếu muốn thêm nhiều nhãn, hãy phân tách các nhãn bằng dấu phẩy.

Ví dụ:

Microsoft Word, Thủ thuật Office

Bước 4: Lưu bài viết

Chọn Cập nhật để lưu thay đổi đối với bài viết đã xuất bản.

Sau khi gắn nhãn, Blogger có thể sử dụng thông tin này để nhóm và hiển thị bài viết trên trang nhãn tương ứng.

3. Cách hiển thị danh sách nhãn trên Blogger

Nếu mục tiêu của bạn là hiển thị một danh sách chủ đề để người đọc lựa chọn, cách đơn giản là sử dụng tiện ích Nhãn (Labels) có sẵn trong Blogger.

Phương pháp này không yêu cầu chỉnh sửa JavaScript hoặc chèn mã vào theme.

Bước 1: Mở phần Bố cục

Trong trang quản trị Blogger, chọn:

Blogger → Bố cục

Bước 2: Thêm tiện ích

Tại vị trí muốn hiển thị danh sách nhãn, chọn Thêm tiện ích.

Vị trí có thể là thanh bên hoặc một khu vực khác mà theme của bạn cho phép thêm tiện ích.

Bước 3: Chọn tiện ích Nhãn

Tìm tiện ích Nhãn (Labels) và thêm vào bố cục.

Tùy giao diện Blogger, bạn có thể thiết lập tên tiện ích và các tùy chọn hiển thị được cung cấp.

Bước 4: Lưu và kiểm tra

Lưu tiện ích, lưu bố cục nếu được yêu cầu và mở blog để kiểm tra kết quả.

Kết quả mong đợi:

Người đọc nhìn thấy danh sách các nhãn. Khi chọn một nhãn, Blogger mở trang tập hợp những bài viết được gắn nhãn đó.

4. Cách hiển thị bài viết theo một nhãn cụ thể

Cần phân biệt hai hình thức:

• Danh sách nhãn: hiển thị tên các chủ đề.
• Danh sách bài viết theo nhãn: hiển thị tiêu đề hoặc thẻ giới thiệu của những bài viết thuộc một chủ đề cụ thể.

Tiện ích Nhãn có sẵn của Blogger chủ yếu phục vụ việc điều hướng đến các trang nhãn.

Nếu muốn hiển thị một khối bài viết riêng trên trang chủ, bạn có thể chọn cách phù hợp với nhu cầu và theme đang sử dụng.

Cách 1: Tạo liên kết đến trang nhãn

Đây là phương pháp đơn giản, không cần JavaScript.

Ví dụ, nếu blog có nhãn Microsoft Word, bạn có thể tạo liên kết đến trang nhãn tương ứng.

Cấu trúc URL trang nhãn của Blogger thường có dạng:

https://TEN-BLOG.blogspot.com/search/label/TEN-NHAN

Bạn nên mở nhãn thực tế trên blog và sao chép URL từ thanh địa chỉ để tránh sai tên nhãn hoặc lỗi mã hóa ký tự tiếng Việt.

Cách 2: Tạo một khối liên kết bài viết theo chủ đề

Nếu chỉ cần giới thiệu một số bài viết tiêu biểu, bạn có thể sử dụng tiện ích HTML/JavaScript và chèn một khối HTML đơn giản.

Ví dụ:

Bài viết về Microsoft Word

• Cách chỉnh font chữ và cỡ chữ mặc định trong Word
• Cách khắc phục lỗi mất thanh thước Ruler trong Word
• Cách bật thẻ Developer trong Word

Khối này giúp người đọc truy cập nhanh những nội dung liên quan mà không cần chạy script lấy dữ liệu.

Giới hạn:

Danh sách liên kết HTML được tạo thủ công sẽ không tự thêm bài viết mới. Khi xuất bản thêm bài cùng chủ đề, bạn cần cập nhật danh sách nếu muốn bài mới xuất hiện tại đây.

Cách 3: Hiển thị tự động bài viết theo nhãn

Nếu muốn một khối tự cập nhật khi có bài viết mới thuộc một nhãn, bạn có thể sử dụng chức năng có sẵn của theme hoặc một tiện ích được thiết kế riêng.

Trước khi cài đặt thêm mã, hãy kiểm tra xem theme hiện tại đã có khu vực hiển thị bài viết theo nhãn hay chưa.

Nếu theme đã hỗ trợ chức năng này, việc cài thêm script khác có thể tạo ra các khối trùng lặp hoặc gây xung đột hiển thị.

Trường hợp cần tùy chỉnh JavaScript, hãy thử trên bản sao lưu theme và kiểm tra kết quả trên cả máy tính lẫn điện thoại.

5. Khi nào cần sử dụng HTML/JavaScript?

Bài viết gốc của Blog Vn Chia sẻ hướng dẫn chèn CSS, JavaScript và một tiện ích HTML/JavaScript để hiển thị bài viết theo nhãn.

Đây là một phương pháp tùy chỉnh từng được sử dụng trên nhiều theme Blogger.

Tuy nhiên, bạn không nên chép nguyên mã cũ vào theme hiện tại khi chưa kiểm tra cấu trúc và khả năng tương thích.

Những trường hợp có thể cần mã tùy chỉnh

• Muốn hiển thị ảnh đại diện và tiêu đề bài viết trong một khối riêng.
• Muốn giới hạn số bài viết được hiển thị theo nhãn.
• Muốn thay đổi bố cục danh sách bài viết.
• Theme không có chức năng hiển thị bài viết theo nhãn như mong muốn.

Sao lưu theme trước khi chỉnh sửa

Nếu cần sửa theme, hãy sao lưu trước:

Blogger → Chủ đề → Sao lưu

Sau đó tải bản sao theme về máy tính.

Nếu có lỗi, bạn có thể sử dụng bản sao để đối chiếu hoặc khôi phục theo chức năng Blogger cung cấp.

Không nên sửa theme chỉ để tạo một danh sách nhãn đơn giản.

Hãy ưu tiên tiện ích Nhãn có sẵn trước khi lựa chọn phương pháp cần chèn mã.

6. Hình ảnh minh họa từ bài viết gốc

Dưới đây là ảnh kết quả được lưu lại trong bài viết trước đây của Blog Vn Chia sẻ.

Ảnh tư liệu: Kết quả hiển thị bài viết theo nhãn trên blog ở thời điểm bài hướng dẫn gốc được thực hiện.

7. Những lỗi thường gặp khi hiển thị bài viết theo nhãn

Nhãn không xuất hiện

Hãy kiểm tra bài viết đã được gắn nhãn và lưu thành công hay chưa.

Nếu sử dụng tiện ích Nhãn, hãy kiểm tra cài đặt của tiện ích và xác nhận nhãn cần hiển thị không bị loại khỏi danh sách.

Trang nhãn không có bài viết

Kiểm tra chính tả của tên nhãn và URL đang sử dụng.

Các nhãn có dấu tiếng Việt hoặc dấu cách cần được liên kết bằng URL chính xác.

Tiện ích xuất hiện trên máy tính nhưng không thấy trên điện thoại

Một số theme có thiết lập ẩn thanh bên hoặc thay đổi vị trí tiện ích trên màn hình nhỏ.

Hãy kiểm tra giao diện điện thoại trước khi kết luận tiện ích bị lỗi.

Danh sách bài viết bị trùng lặp

Kiểm tra xem theme đã có khối bài viết theo nhãn hay chưa.

Nếu cùng một chức năng được tạo bằng nhiều tiện ích hoặc script, bạn có thể nhìn thấy các danh sách trùng nhau.

Trang tải chậm sau khi thêm tiện ích

Nếu tiện ích sử dụng JavaScript và tải nhiều ảnh hoặc dữ liệu bài viết, hãy kiểm tra lại số lượng bài được hiển thị.

Không nên mặc định rằng thêm nhiều khối bài viết sẽ làm blog hữu ích hơn. Hãy ưu tiên các khu vực thực sự hỗ trợ người đọc tìm nội dung.

8. Câu hỏi thường gặp

Label và chuyên mục trong Blogger có giống nhau không?

Label có thể được sử dụng để tổ chức nội dung theo chủ đề, tương tự vai trò chuyên mục trên một số nền tảng khác. Tuy nhiên, cách quản lý và cấu trúc của Blogger không hoàn toàn giống các hệ thống quản trị nội dung khác.

Một bài viết có thể có nhiều nhãn không?

Có. Bạn có thể gắn nhiều nhãn cho một bài viết nếu các nhãn đó phản ánh đúng nội dung.

Có bắt buộc chỉnh sửa theme để hiển thị Label không?

Không. Nếu chỉ muốn hiển thị danh sách nhãn, bạn có thể sử dụng tiện ích Nhãn trong phần Bố cục.

Tiện ích Nhãn có tự hiển thị ảnh đại diện của từng bài viết không?

Không phải theo chức năng danh sách nhãn thông thường. Nếu muốn tạo khối bài viết kèm ảnh đại diện, bạn cần kiểm tra chức năng theme hoặc giải pháp tùy chỉnh phù hợp.

Có nên thêm rất nhiều nhãn cho một bài viết để tăng SEO không?

Không nên thêm nhãn không liên quan chỉ để tăng số lượng trang nhãn. Hãy sử dụng nhãn có ý nghĩa, nhất quán và giúp người đọc tìm bài viết dễ dàng hơn.

Kết luận

Hiển thị bài viết theo Label là một cách tổ chức nội dung hữu ích trên Blogger.

Nếu chỉ cần danh sách chủ đề, hãy sử dụng tiện ích Nhãn có sẵn. Nếu cần một khối bài viết theo nhãn với ảnh đại diện, tiêu đề và phần mô tả, hãy kiểm tra khả năng của theme trước khi thêm mã tùy chỉnh.

Việc lựa chọn giải pháp đơn giản, dễ bảo trì sẽ giúp bạn quản lý blog thuận tiện hơn khi số lượng bài viết tăng lên.

Bài viết liên quan

Tạo nhãn Label bài đăng gần đây hoặc bài đăng mới trong Blogger

Cách tạo nút Back to Top cho Blogger

Tại sao chọn Blogger để chia sẻ nội dung?

Tài liệu tham khảo

1. Google Blogger Help. Create, edit, manage, or delete a post .

2. Google Blogger Help. Change the design of your blog .

3. Google Blogger Help. Use themes to change how your blog looks .

Ghi chú: Bài viết được biên tập lại từ hướng dẫn hiển thị bài viết theo Label trước đây của Blog Vn Chia sẻ. Ảnh kết quả gốc được giữ lại làm tư liệu minh họa.

Share:

Đọc thêm

Cách Tạo Nút Back to Top Cho Blogger Không Cần jQuery

Nút lên đầu trang (Back to Top) là một nút điều hướng giúp người đọc nhanh chóng quay về đầu trang sau khi cuộn xuống những phần nội dung phía dưới.

Đối với các blog có bài viết dài, nút Back to Top giúp người đọc quay lại tiêu đề, mục lục hoặc thanh điều hướng mà không cần cuộn thủ công qua toàn bộ bài viết.

Trong bài viết này, Blog Vn Chia sẻ hướng dẫn cách tạo nút Back to Top cho Blogger bằng CSS và JavaScript thuần, không cần tải thêm jQuery hoặc Font Awesome.

Kết quả sau khi thực hiện

Khi người đọc cuộn xuống khoảng 400 px, nút mũi tên sẽ xuất hiện ở góc dưới bên phải màn hình. Nhấn vào nút để quay về đầu trang.

Nội dung bài viết

1. Nút Back to Top là gì?
2. Ảnh minh họa nút Back to Top
3. Bước 1: Sao lưu theme Blogger
4. Bước 2: Chèn mã Back to Top
5. Bước 3: Tùy chỉnh nút
6. Bước 4: Kiểm tra sau khi cài đặt
7. Khắc phục lỗi thường gặp
8. Câu hỏi thường gặp

1. Nút Back to Top là gì?

Back to Top có nghĩa là quay về đầu trang.

Đây là một thành phần điều hướng thường được đặt cố định tại góc dưới của màn hình.

Khi người đọc cuộn xuống một khoảng nhất định, nút sẽ xuất hiện. Người đọc chỉ cần nhấn nút để quay lại phần đầu trang.

Chức năng này có thể hữu ích khi blog có:

• Bài viết dài với nhiều đề mục.
• Hướng dẫn từng bước kèm nhiều hình ảnh.
• Danh sách tài liệu hoặc nội dung tham khảo.
• Bài viết được đọc trên màn hình điện thoại.

Tuy nhiên, không nên đặt nút quá lớn hoặc che nội dung, quảng cáo hay các nút điều hướng khác.

2. Hình ảnh minh họa nút Back to Top

Dưới đây là hình ảnh từ bài hướng dẫn trước đây của Blog Vn Chia sẻ.

Hình 1. Nút Back to Top trên giao diện Blogger trong bài hướng dẫn gốc.

3. Bước 1: Sao lưu theme Blogger

Trước khi chỉnh sửa mã HTML của theme, bạn nên tạo một bản sao lưu để có thể khôi phục nếu thao tác sai.

Thực hiện:

1. Đăng nhập Blogger.
2. Chọn blog muốn chỉnh sửa.
3. Mở mục Chủ đề.
4. Chọn chức năng Sao lưu trong menu quản lý theme.
5. Tải tệp XML về máy tính.

Lưu ý:

Nên lưu tệp theme XML gốc thay vì chỉ sao chép toàn bộ mã HTML vào Word. Việc lưu đúng định dạng giúp bạn thuận tiện hơn khi cần khôi phục theme.

4. Bước 2: Chèn mã Back to Top vào theme Blogger

Sau khi sao lưu, quay lại:

Blogger → Chủ đề → Chỉnh sửa HTML

Nhấn Ctrl + F và tìm:

</body>

Đặt con trỏ ngay phía trước thẻ đóng này.

Sau đó sao chép toàn bộ đoạn mã bên dưới và dán vào vị trí vừa tìm.

Chú ý:

Đây là mã dành cho theme XML của Blogger. Không dán mã vào phần nội dung bài đăng nếu bạn muốn nút xuất hiện trên toàn bộ blog.

Mã Back to Top hoàn chỉnh

<!-- BACK TO TOP - BLOG VN CHIA SE -->

<style type='text/css'>

#bvc-back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #0066cc;
  color: #ffffff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

#bvc-back-to-top.bvc-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

#bvc-back-to-top:hover {
  background: #004b99;
}

#bvc-back-to-top:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  #bvc-back-to-top {
    right: 15px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    font-size: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bvc-back-to-top {
    transition: none;
  }
}

</style>

<button
  id='bvc-back-to-top'
  type='button'
  aria-label='Lên đầu trang'
  title='Lên đầu trang'>
  &#8593;
</button>

<script type='text/javascript'>
//<![CDATA[

(function () {
  'use strict';

  var button = document.getElementById(
    'bvc-back-to-top'
  );

  if (!button) {
    return;
  }

  function updateButton() {
    if (window.scrollY > 400) {
      button.classList.add('bvc-show');
      button.removeAttribute('tabindex');
    } else {
      button.classList.remove('bvc-show');
      button.setAttribute('tabindex', '-1');
    }
  }

  button.addEventListener('click', function () {

    var reduceMotion = window.matchMedia(
      '(prefers-reduced-motion: reduce)'
    ).matches;

    window.scrollTo({
      top: 0,
      behavior: reduceMotion ? 'auto' : 'smooth'
    });

  });

  window.addEventListener(
    'scroll',
    updateButton,
    { passive: true }
  );

  updateButton();

})();

//]]>
</script>

<!-- END BACK TO TOP -->

Sau khi chèn mã, chọn Lưu.

Nếu Blogger thông báo lỗi XML, hãy kiểm tra xem bạn đã sao chép đầy đủ các thẻ đóng và phần CDATA trong đoạn JavaScript hay chưa.

5. Bước 3: Tùy chỉnh nút Back to Top

Thay đổi màu sắc

Trong đoạn CSS, tìm:

background: #0066cc;

Bạn có thể thay mã màu này bằng màu phù hợp với giao diện blog.

Thay đổi vị trí

Tìm hai thuộc tính:

right: 20px;
bottom: 20px;

Giá trị right quyết định khoảng cách từ nút đến mép phải màn hình; bottom quyết định khoảng cách từ nút đến mép dưới.

Thay đổi thời điểm xuất hiện

Trong JavaScript, tìm:

if (window.scrollY > 400)

Số 400 nghĩa là nút xuất hiện khi người đọc cuộn xuống quá 400 px.

Nếu muốn nút xuất hiện muộn hơn, bạn có thể thay thành 600.

6. Bước 4: Kiểm tra sau khi cài đặt

Sau khi lưu theme, hãy mở một bài viết dài và kiểm tra:

1. Nút chưa xuất hiện khi trang vừa mở ở đầu.
2. Nút xuất hiện khi cuộn xuống đủ xa.
3. Nhấn nút sẽ quay về đầu trang.
4. Nút không che nội dung trên điện thoại.
5. Nút không trùng với nút chat hoặc thành phần nổi khác.

Hình 2. Kết quả thêm nút Back to Top trong bài hướng dẫn gốc. Nút mới có thể khác đôi chút về kiểu dáng.

7. Khắc phục lỗi thường gặp

Không thấy nút Back to Top

Hãy thử cuộn xuống hơn 400 px. Nút được thiết kế để ẩn khi người đọc đang ở đầu trang.

Nếu vẫn không xuất hiện, kiểm tra đoạn mã đã được lưu thành công trong theme chưa.

Có hai nút lên đầu trang

Theme có thể đã tích hợp sẵn chức năng này hoặc còn lưu đoạn mã Back to Top trước đây.

Hãy kiểm tra và chỉ giữ một phiên bản để tránh trùng lặp.

Nút che quảng cáo hoặc nút chat

Điều chỉnh giá trị right và bottom để tạo khoảng cách phù hợp.

Kiểm tra riêng trên điện thoại vì không gian màn hình nhỏ hơn máy tính.

Blogger báo lỗi khi lưu theme

Hãy kiểm tra xem đoạn mã có bị thiếu thẻ đóng hoặc bị thay đổi ký tự khi sao chép hay không.

Nếu đang sử dụng một theme tùy chỉnh có cấu trúc đặc biệt, bạn nên thử mã trên bản sao trước khi áp dụng cho blog chính.

8. Câu hỏi thường gặp

Có cần cài jQuery để tạo nút Back to Top không?

Không. Đoạn mã trong bài viết sử dụng JavaScript thuần và không cần jQuery.

Có cần Font Awesome không?

Không. Nút sử dụng ký hiệu mũi tên Unicode nên không cần tải thư viện biểu tượng.

Có thể sử dụng nút trên điện thoại không?

Có. Đoạn CSS có thiết lập riêng cho màn hình nhỏ.

Có cần thêm mã vào từng bài viết không?

Không. Nếu cài vào theme Blogger, nút có thể xuất hiện trên các trang sử dụng theme đó.

Có nên cài nhiều hiệu ứng chuyển động không?

Bạn nên ưu tiên nút dễ nhìn, dễ nhấn và không gây mất tập trung. Hiệu ứng đơn giản thường phù hợp hơn với blog có nhiều nội dung dài.

Kết luận

Nút Back to Top là một thành phần điều hướng nhỏ nhưng có thể giúp người đọc sử dụng blog thuận tiện hơn.

Với CSS và JavaScript thuần, bạn có thể tạo nút lên đầu trang mà không cần thêm jQuery hoặc thư viện biểu tượng.

Trước khi chỉnh sửa theme, hãy sao lưu tệp XML và kiểm tra xem blog đã có nút Back to Top hay chưa để tránh cài đặt trùng lặp.

Bài viết liên quan

Cách hiển thị bài viết theo nhãn Label trong Blogger

Cách tạo tiện ích bài viết mới nhất trong Blogger

Tại sao chọn Blogger để tạo blog?

Ghi chú: Bài viết được cập nhật từ hướng dẫn tạo nút Back to Top trước đây của Blog Vn Chia sẻ. Hai ảnh gốc được giữ lại làm tư liệu minh họa.

Share:

Đọc thêm