Tạo Headline Breaking News cho Blogspot

https://photos.google.com/u/1/album/AF1QipPI6UGZIJxjrxezqdHsDMRUNxaZrfH2qDLhvbyC

🌟 Các tính năng nổi bật của phiên bản mới

• Thiết kế nhỏ gọn (Compact UI): Chiều cao chỉ 34px, không chiếm nhiều không gian, dễ dàng đặt ngay dưới phần Header hoặc phía trên bài đăng.
  
  
• Hiệu ứng chạy mượt mà (Marquee): Sử dụng thuần JavaScript kết hợp requestAnimationFrame giúp thanh tin tức trượt chạy cực kỳ êm ái, không giật lag.
  
  
• Tương tác thông minh: Tự động dừng chạy khi người đọc rê chuột vào để họ thong thả đọc tiêu đề, và tiếp tục chạy khi rê chuột ra.
  
  
• Nút điều hướng tiện lợi: Tích hợp sẵn nút mũi tên trái/phải (❮ / ❯) cho phép người xem chủ động tua nhanh hoặc lùi lại xem bài trước đó.
  
  
• Tự động lấy bài viết qua JSON Feed: Tự động quét và lấy danh sách các bài viết mới nhất từ blog của bạn mà không cần cài đặt API phức tạp.
  
  

📝 Hướng dẫn các bước cài đặt chi tiết

Bước 1: Thêm mã CSS vào phần Chỉnh sửa HTML của Blog

1. Đăng nhập vào trang quản trị Blogger, chọn Mẫu (Theme) > nhấp vào mũi tên cạnh nút Tùy chỉnh và chọn Chỉnh sửa HTML (Edit HTML).
   
   
2. Tìm đến thẻ đóng </head> và dán toàn bộ đoạn mã CSS dưới đây vào trước thẻ </head>:

<style type='text/css'> /* CSS CHO WIDGET BREAKING NEWS COMPACT */ .truc-news-ticker { display: flex; align-items: center; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 4px; height: 34px; line-height: 34px; overflow: hidden; margin: 10px auto; max-width: 100%; box-sizing: border-box; font-family: inherit; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .truc-news-label { background: #e74c3c; color: #ffffff; font-weight: 700; font-size: 11px; text-transform: uppercase; padding: 0 10px; height: 34px; line-height: 34px; white-space: nowrap; display: flex; align-items: center; gap: 5px; z-index: 2; } .truc-news-label svg { width: 12px; height: 12px; fill: currentColor; animation: trucBlink 1.5s infinite; } @keyframes trucBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .truc-news-container { flex-grow: 1; overflow: hidden; position: relative; height: 34px; background: #fff; padding: 0 10px; } .truc-news-track { display: flex; position: absolute; white-space: nowrap; will-change: transform; } .truc-news-item { display: inline-block; padding-right: 40px; font-size: 12px; } .truc-news-item a { color: #333333; font-weight: 600; text-decoration: none; transition: color 0.2s; } .truc-news-item a:hover { color: #e74c3c; text-decoration: underline; } .truc-news-controls { display: flex; border-left: 1px solid #e0e0e0; background: #f9f9f9; } .truc-news-btn { background: transparent; border: none; outline: none; width: 28px; height: 34px; cursor: pointer; font-size: 12px; color: #666; display: flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .truc-news-btn:hover { background: #e74c3c; color: #fff; } .truc-news-btn + .truc-news-btn { border-left: 1px solid #e0e0e0; } </style>

3. Nhấp Lưu mẫu (Save) ở góc trên bên phải.
   
   

Bước 2: Thêm Tiện ích hiển thị ra Bố cục

1. Quay lại trang quản trị Blogger, chọn phần Bố cục (Layout).
   
   
2. Tìm vị trí bạn muốn đặt tiện ích (khuyên dùng đặt ngay phía trên phần Bài đăng trên blog).
   
   
3. Nhấp vào Thêm tiện ích (Add a Gadget), chọn HTML/JavaScript và dán toàn bộ đoạn mã HTML & Script sau vào:

<div class='truc-news-ticker' id='trucTickerWidget'> <div class='truc-news-label'> <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg> Tin Mới </div> <div class='truc-news-container' id='trucContainer'> <div class='truc-news-track' id='trucTrack'> <div class='truc-news-item'><a href='#'>Đang tải tin tức mới nhất...</a></div> </div> </div> <div class='truc-news-controls'> <button class='truc-news-btn' id='trucPrevBtn' title='Tin trước'>&#10094;</button> <button class='truc-news-btn' id='trucNextBtn' title='Tin tiếp'>&#10095;</button> </div> </div> <script> document.addEventListener("DOMContentLoaded", function() { // Tự động lấy danh sách 10 bài viết mới nhất từ feed blog hiện tại const feedUrl = '/feeds/posts/default?alt=json-in-script&max-results=10'; var script = document.createElement('script'); script.src = feedUrl + '&callback=initTrucTicker'; document.head.appendChild(script); }); function initTrucTicker(json) { const track = document.getElementById('trucTrack'); const container = document.getElementById('trucContainer'); const prevBtn = document.getElementById('trucPrevBtn'); const nextBtn = document.getElementById('trucNextBtn'); let itemsHtml = ''; if (json.feed && json.feed.entry) { for (let i = 0; i < json.feed.entry.length; i++) { let entry = json.feed.entry[i]; let title = entry.title.$t; let postUrl = '#'; for (let j = 0; j < entry.link.length; j++) { if (entry.link[j].rel === 'alternate') { postUrl = entry.link[j].href; break; } } itemsHtml += `<div class="truc-news-item"><a href="${postUrl}">${title}</a></div>`; } // Nhân đôi nội dung để tạo vòng lặp chạy vô tận mượt mà không bị ngắt quãng track.innerHTML = itemsHtml + itemsHtml; } else { track.innerHTML = '<div class="truc-news-item"><a href="#">Không có bài viết nào.</a></div>'; return; } // Thiết lập thông số chuyển động tự động từ phải qua trái let currentX = 0; let speed = 0.8; // Tốc độ chạy (có thể tăng giảm tuỳ ý) let isPaused = false; let animationId; const singleSetWidth = track.scrollWidth / 2; function playTicker() { if (!isPaused) { currentX -= speed; if (Math.abs(currentX) >= singleSetWidth) { currentX = 0; } track.style.transform = `translateX(${currentX}px)`; } animationId = requestAnimationFrame(playTicker); } playTicker(); // Tạm dừng khi rê chuột vào, tiếp tục chạy khi rê chuột ra container.addEventListener('mouseenter', () => isPaused = true); container.addEventListener('mouseleave', () => isPaused = false); // Nút điều hướng thủ công (Mũi tên Trái / Phải) prevBtn.addEventListener('click', () => { currentX += 150; if (currentX > 0) currentX = -singleSetWidth; track.style.transform = `translateX(${currentX}px)`; }); nextBtn.addEventListener('click', () => { currentX -= 150; if (Math.abs(currentX) >= singleSetWidth) currentX = 0; track.style.transform = `translateX(${currentX}px)`; }); } </script>

4. Nhấp Lưu (Save) lại.
   
   

🎯 Lời kết