Share code hiển thị bài đăng dạng Breaking New
Xin chào các bạn đã quay trở lại với CH1NH BX BLOG. Hôm nay, mình sẽ chia sẻ với các bạn một widget Blogger hiển thị bài viết theo dạng Breaking News cực kỳ tiện lợi và hiện đại.
Mở đầu
Widget này sẽ tự động cập nhật tất cả bài viết mới trên blog của bạn thông qua JSON Feed. Nó hiển thị nội dung dưới dạng tin chạy ngang (news ticker) — phong cách hiện đại, hỗ trợ dark mode và dễ dàng tùy chỉnh màu sắc với biến CSS. Thiết kế responsive, hoạt động mượt trên cả desktop lẫn mobile. Giao diện tối giản, gọn gàng, dễ gây chú ý cho người đọc. Thôi không dài dòng nữa, cùng bắt đầu luôn nhé!
Cài đặt
Dán đoạn mã dưới đây vào nơi bạn muốn hiển thị widget trên blog.
Lưu ý: Hãy **thay đoạn link JSON tô đậm** bằng JSON Feed của blog bạn nếu bạn không dùng `ch1nhbxblog.blogspot.com`.
<div id='breakingNewsHanHaoyuCom'>
<span class='head-breaking-HanHaoyuCom'>Bài viết</span>
<marquee id='article-breakingNews-by-HanHaoyuCom' behavior="scroll" direction="left" scrollamount="5">Đang tải tin tức...</marquee>
</div>
<style>
/* Breaking News by Han Haoyu */ #breakingNewsHanHaoyuCom{position:relative;margin:0 auto;height:42px;line-height:29px;overflow:hidden;background:var(--notifU);border:1px solid var(--notifC);box-shadow:0 5px 35px rgb(0 0 0 / 7%);border-radius:10px}#breakingNewsHanHaoyuCom .head-breaking-HanHaoyuCom{position:absolute;background:none repeat scroll 0 0 var(--notifC);color:#fff;display:block;float:left;font-family:inherit;font-size:16px;font-weight:400;text-transform:uppercase;padding:6.5px 22px}#article-breakingNews-by-HanHaoyuCom li a{font-family:inherit;font-weight:400;color:var(--notifC);margin-top:10px;transition:all 0.5s ease-in-out}#article-breakingNews-by-HanHaoyuCom li a:hover{color:black}#article-breakingNews-by-HanHaoyuCom{float:left;margin-left:160px;margin-top:6px}#article-breakingNews-by-HanHaoyuCom ul,#article-breakingNews-by-HanHaoyuCom li{list-style:none;margin:0;padding:0}@media only screen and (max-width:640px){#breakingNewsHanHaoyuCom{margin:20px 0 0 0;margin-right:0}#breakingNewsHanHaoyuCom .head-breaking-HanHaoyuCom{padding:6.5px 14px}#article-breakingNews-by-HanHaoyuCom{margin-left:140px}}.drK #breakingNewsHanHaoyuCom{background:var(--darkBa);border:1px solid var(--darkW);box-shadow:0 5px 35px rgb(0 0 0 / 7%)}.drK #breakingNewsHanHaoyuCom .head-breaking-HanHaoyuCom{background:none repeat scroll 0 0 var(--darkW);color:#fff}.drK #article-breakingNews-by-HanHaoyuCom li a:hover{color:#8129d1}.drK #article-breakingNews-by-HanHaoyuCom li a{color:white}#breakingNewsHanHaoyuCom .head-breaking-HanHaoyuCom:hover{animation:nudge 1s ease}#article-breakingNews-by-HanHaoyuCom ul, #article-breakingNews-by-HanHaoyuCom li:hover{animation:nudge 1s ease}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const feedUrl = "https://ch1nhbxblog.blogspot.com/feeds/posts/default?alt=json";
const marquee = document.getElementById("article-breakingNews-by-HanHaoyuCom");
fetch(feedUrl)
.then(response => response.json())
.then(data => {
const posts = data.feed.entry;
let newsHTML = "";
posts.slice(0, 5).forEach(post => { // Lấy 5 bài viết gần nhất
const postTitle = post.title.$t;
const postUrl = post.link.find(link => link.rel === "alternate").href;
newsHTML += `<a href="${postUrl}" target="_blank">${postTitle}</a> | `;
});
marquee.innerHTML = newsHTML.slice(0, -13); // Xóa phần "| " cuối cùng
})
.catch(error => {
console.error("Lỗi khi tải nguồn cấp dữ liệu:", error);
marquee.innerHTML = "Không thể tải tin tức.";
});
});
</script>
Thay đổi link mình tô đậm thành link JSON của Blog của bạn
Thay cho tiện ích hình ảnh
Tiện ích hình ảnh
Nếu bạn muốn thay tiện ích hình ảnh bằng widget này thì nên **tắt phần widget hình ảnh mặc định** đi nhé.
- Mặc định Blogger có 4 widget hình ảnh tên là slider image 1 đến slider image 4.
![image_title]()
Mặc định widget hình ảnh - Nếu muốn thêm một widget mới, vào phần Chỉnh sửa HTML của giao diện, nhấn Ctrl + F để tìm thẻ <b:section> chứa widget hình ảnh. Mặc định tên là slider-widget.
![image_title]()
Tên thẻ section widget hình ảnh ![image_title]()
Sau khi nhấn ctrl + f bạn nhập tên đó vào ![image_title]()
Tìm đến thẻ này - Trong phần đó, tìm dòng `maxwidgets='4'`, sửa thành `maxwidgets='5'` hoặc nhiều hơn nếu cần, sau đó lưu lại.
- Quay lại phần Bố cục, tìm đến khu vực widget hình ảnh, bạn sẽ thấy nút “Thêm tiện ích”. Bấm vào đó, chọn HTML/JavaScript và dán đoạn code của widget Breaking News vào là xong.
Lời kết
Vậy là xong! Nếu bạn có bất kỳ thắc mắc nào, đừng ngại để lại bình luận bên dưới, hoặc liên hệ qua trang Liên hệ hay Facebook của mình nhé. Mình luôn sẵn sàng hỗ trợ. Chúc bạn thành công!
11 nhận xét
Mà làm chuỗi ko shop:))