1. Giới thiệu
Mặc dù Blogger đã có sẵn widget "Bài đăng phổ biến" hoặc "Bài đăng mới", nhưng khả năng tùy biến giao diện của chúng rất hạn chế. Hôm nay, thuthuat.pro sẽ hướng dẫn các bạn cách sử dụng thư viện @deox/blogger-feed để tạo một Widget bài viết mới nhất hoàn toàn chủ động: tự lấy ảnh đại diện, tự chỉnh kích thước ảnh sắc nét và tốc độ tải cực nhanh nhờ kỹ thuật script defer.
Bài viết liên quan
2. Ưu điểm của phương pháp này
-
Tùy biến 100%: Bạn có thể chỉnh CSS để phù hợp với mọi giao diện (đặc biệt là Plus UI, Median UI...).
-
Ảnh đại diện sắc nét: Khắc phục lỗi ảnh mờ (s72-c) mặc định của Blogger.
-
Không làm chậm blog: Sử dụng cơ chế nạp không đồng bộ, giúp điểm Google PageSpeed của bạn không bị ảnh hưởng.
-
Vượt rào cản CORS: Sử dụng cơ chế JSONP giúp lấy dữ liệu mượt mà từ máy chủ Google.
3. Hướng dẫn chi tiết các bước thực hiện
Bước 1: Thêm thư viện vào mã nguồn
Để widget có thể hoạt động, bạn cần nạp "bộ não" xử lý dữ liệu. Hãy vào
Chủ đề (Theme) >
Chỉnh sửa HTML, tìm
thẻ đóng
</body>
và dán đoạn mã sau ngay phía trên nó:
<script defer='defer' src='https://cdn.jsdelivr.net/npm/@deox/[email protected]/dist/blogger-feed.min.js'/>
Lưu ý: Chúng ta sử dụng
defer để thư
viện tải song song với nội dung trang, giúp tối ưu SEO.
Bước 2: Thêm Widget vào Bố cục (Layout)
-
Truy cập vào mục Bố cục (Layout) trên bảng điều khiển Blogger.
-
Chọn Thêm tiện ích (Add a Gadget) tại vị trí bạn muốn hiển thị (thường là Sidebar).
-
Chọn loại HTML/JavaScript.
-
Dán toàn bộ đoạn mã tối ưu dưới đây vào:
<div id="latest-posts-container">Đang tải dữ liệu...</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Thay địa chỉ blog của bạn vào đây
const myFeed = new BloggerFeed("https://www.thuthuat.pro", { jsonp: true });
myFeed.posts.list({ maxResults: 5 }).then(posts => {
let html = '<ul style="list-style:none; padding:0; margin:0;">';
posts.forEach(post => {
// Xử lý lấy ảnh đại diện sắc nét
let thumb = (post.images && post.images.length > 0) ? post.images[0].url : (post.thumbnail ? post.thumbnail : "https://placehold.co/200x150?text=No+Image");
// Chuyển ảnh từ 72px thành 200px để sắc nét hơn
if (thumb.includes('googleusercontent.com')) {
thumb = thumb.replace(/\/s[0-9]+(-c)?\//, '/s200-c/');
}
html += `
<li style="display:flex; margin-bottom:15px; align-items:center; border-bottom:1px solid #eee; padding-bottom:10px;">
<div style="flex-shrink:0; width:80px; height:60px; margin-right:12px; overflow:hidden; border-radius:6px;">
<img src="${thumb}" style="width:100%; height:100%; object-fit:cover;" alt="${post.title}" onerror="this.src='https://placehold.co/80x60?text=Error'">
</div>
<a href="${post.url}" style="text-decoration:none; color:#1a1a1a; font-weight:600; font-size:14px; line-height:1.4;">
${post.title}
</a>
</li>`;
});
html += '</ul>';
document.getElementById('latest-posts-container').innerHTML = html;
}).catch(err => {
document.getElementById('latest-posts-container').innerHTML = "Lỗi tải dữ liệu.";
});
});
</script>
4. Giải thích kỹ thuật cho những bạn muốn học hỏi
Trong đoạn code trên, mình đã xử lý một lỗi rất phổ biến trên Blogger là ảnh đại diện bị mờ.
Blogger mặc định trả về link ảnh chứa tham số
/s72-c/.Dòng code
.replace(/\/s[0-9]+(-c)?\//, '/s200-c/')sử dụng Regular Expression (Regex) để tìm và thay thế kích thước ảnh lên 200px giúp hiển thị cực nét trên mọi loại màn hình.Hàm
onerrorgiúp website của bạn trông chuyên nghiệp hơn bằng cách hiện ảnh dự phòng nếu bài viết đó lỡ tay xóa mất ảnh gốc.
5. Kết luận
Chỉ với vài dòng code, bạn đã có một widget bài viết mới nhất cực kỳ "xịn xò" cho Blogspot của mình. Nếu các bạn gặp lỗi trong quá trình cài đặt, hãy để lại bình luận bên dưới, mình sẽ hỗ trợ giải đáp ngay!
Copyright ©Thủ Thuật Pro