Home
Blogspot
Template

Tạo Slide cho Theme NineStream như AnimeT

🎯 Hướng Dẫn Tạo Slider Hiển Thị Bài Viết Mới Nhất (recentupdate) Trên Blogger

Slider hiển thị bài viết mới nhất giúp Blog của bạn trông chuyên nghiệp hơn, cải thiện trải nghiệm người dùng, và giúp bài viết nổi bật hơn. Trong hướng dẫn này, mình sẽ hướng dẫn cách tạo một slider tự động cập nhật bài viết mới nhất (recentupdate) trên Blogger bằng Swiper.js.

✨ 1. Mục Tiêu

✔ Tự động lấy bài viết mới nhất từ Blogger API (recentupdate).
✔ Hiển thị ảnh, tiêu đề, rating, số tập, loại phim.
✔ Sử dụng Swiper.js để tạo hiệu ứng slider đẹp mắt.
✔ Thiết kế chuẩn 2:3 (162x211px).
✔ Tương thích với mọi thiết bị (Responsive).

🛠 2. Các Bước Thực Hiện

1️⃣ Thêm thư viện Swiper.js vào Blogger.
2️⃣ Tạo khung HTML hiển thị slider.
3️⃣ Thêm CSS để thiết kế đẹp và hiển thị đúng tỷ lệ ảnh.
4️⃣ Viết JavaScript lấy bài viết mới nhất từ Blogger API.
5️⃣ Khởi tạo Swiper.js để tạo hiệu ứng slider.

📌 3. Cài Đặt Chi Tiết

📌 Bước 1: Thêm Swiper.js vào Blogger

Bạn cần thêm thư viện Swiper.js vào Blogger. Vào Blogger → Chủ đề → Chỉnh sửa HTML, tìm thẻ <head> và dán đoạn sau vào trước </head>: 

<!-- Thư viện Swiper.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

📌 Bước 2: Tạo khung HTML hiển thị Slider

Thêm đoạn mã sau vào nơi bạn muốn hiển thị Slider Recent Update (ví dụ: Widget HTML/Javascript trong Blogger). 

<!-- SLIDER BÀI VIẾT MỚI NHẤT -->
<div class="container" style="border-radius:12px; padding:15px; margin:20px 0;">
    <div class="ml-title" style="padding:0 15px 15px;">
        <h2 style="color:#fff; font-size:20px; margin:0;">Mới Cập Nhật</h2>
    </div>

    <div class="swiper-container recent-update-slider">
        <div id="recent-update-list" class="swiper-wrapper"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</div>

📌 Bước 3: Thêm CSS để hiển thị slider đẹp hơn

Thêm đoạn CSS này vào Blogger → Chủ đề → Chỉnh sửa HTML hoặc CSS tùy chỉnh. 

/* Swiper Container */
.swiper-container {
    width: 100%;
    overflow: hidden;
}

/* Slide Item */
.recent-update-slider .swiper-slide {
    background: #1e262d;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

/* Hình ảnh 162x211px */
.recent-update-slider .thumbnail-container {
    position: relative;
    width: 162px;
    height: 211px;
    overflow: hidden;
    border-radius: 5px;
    margin: auto;
}

.recent-update-slider .thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rating (Góc trên trái) */
.recent-update-slider .info-top-left {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Tập (Góc dưới trái) */
.recent-update-slider .info-bottom-left {
    position: absolute;
    bottom: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Loại phim (Góc dưới phải) */
.recent-update-slider .info-bottom-right {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(255, 165, 0, 0.8);
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Tiêu đề phim */
.recent-update-slider p {
    margin-top: 10px;
    font-size: 14px;
    color: white;
}

📌 Bước 4: JavaScript - Lấy dữ liệu bài viết từ Blogger API

Thêm đoạn JavaScript này vào Blogger (HTML/JavaScript Widget) hoặc trước thẻ </body>. 

    <!-- Trinhedit -->   
<script>
function recentupdate(data) {
    let entries = data.feed.entry || [];
    let html = &quot;&quot;;

    entries.forEach(entry =&gt; {
        let title = entry.title.$t;
        let link = entry.link.find(l =&gt; l.rel === &quot;alternate&quot;).href;
        
        // Mặc định giá trị
        let rating = &quot;N/A&quot;;
        let episode = &quot;Ep ?&quot;;
        let type = &quot;&quot;; // Ban đầu để rỗng, nếu không hợp lệ thì không hiển thị
        let img = &quot;https://via.placeholder.com/162x211&quot;; // Ảnh mặc định (162x211px)

        // Lấy ảnh từ thumbnail hoặc featured image
        if (entry.media$thumbnail) {
            img = entry.media$thumbnail.url.replace(&quot;s72-c&quot;, &quot;s162&quot;);
        } else if (entry.content.$t.includes(&quot;img&quot;)) {
            let tempDiv = document.createElement(&quot;div&quot;);
            tempDiv.innerHTML = entry.content.$t;
            let imgTag = tempDiv.querySelector(&quot;img&quot;);
            if (imgTag) img = imgTag.src;
        }

        // Lấy thông tin từ label (categories)
        let categories = entry.category ? entry.category.map(cat =&gt; cat.term) : [];
        let validTypes = [&quot;TV&quot;, &quot;Movie&quot;, &quot;OVA&quot;, &quot;ONA&quot;, &quot;Special&quot;]; // Danh sách hợp lệ

        categories.forEach(cat =&gt; {
            if (cat.match(/^\d+(\.\d+)?$/)) {
                rating = cat; // Rating dạng số (6.2, 8.5,...)
            } else if (cat.toLowerCase().includes(&quot;ep&quot;)) {
                episode = cat; // Số tập (Ep 9/10)
            } else if (validTypes.includes(cat)) {
                type = cat; // Chỉ lấy type hợp lệ
            }
        });

        html += `
            <div class='swiper-slide'>
                <a class='block ofc relative poster r3 oh' href='${link}'>
                    <div class='thumbnail-container'>
                        <img alt='${title}' loading='lazy' src='${img}'/>
                        
                        <!-- Góc trên trái: Rating -->
                        <div class='info-top-left'>${rating}</div>

                        <!-- Góc dưới trái: Episode -->
                        <div class='info-bottom-left'>${episode}</div>

                        <!-- Góc dưới phải: Type (chỉ hiển thị nếu hợp lệ) -->
                        ${type ? `<div class='info-bottom-right'>${type}</div>` : &quot;&quot;}
                    </div>

                    <!-- Tiêu đề căn giữa phía dưới ảnh -->
                    <div class='post-title'>${title}</div>
                </a>
            </div>
        `;
    });

    document.getElementById(&quot;recent-update-list&quot;).innerHTML = html;

    // Khởi tạo Swiper
    new Swiper(&#39;.swiper-container&#39;, {
        slidesPerView: &quot;auto&quot;,
        spaceBetween: 10,
        navigation: {
            nextEl: &quot;.swiper-button-next&quot;,
            prevEl: &quot;.swiper-button-prev&quot;,
        },
        breakpoints: {
    320: { slidesPerView: 2, spaceBetween: 8 },   // Điện thoại nhỏ
    480: { slidesPerView: 3, spaceBetween: 10 },  // Điện thoại lớn
    768: { slidesPerView: 5, spaceBetween: 12 },  // Tablet
    1024: { slidesPerView: 6, spaceBetween: 15 }, // Laptop nhỏ
    1280: { slidesPerView: 7, spaceBetween: 18 }  // Màn hình lớn
}
    });
}

// Gọi API JSON-P từ Blogspot
const script = document.createElement(&quot;script&quot;);
script.src = &quot;https://www.animet.fun/feeds/posts/default/?orderby=updated&amp;max-results=10&amp;alt=json-in-script&amp;callback=recentupdate&quot;;
document.body.appendChild(script);
</script>

Thay https://www.animet.fun/ = bằng URL thực của blog bạn.

✅ Hoàn Thành! 🎉

Bạn hãy dán toàn bộ code vào Blogger và kiểm tra lại nhé! 🚀 (Link Github)

Post a Comment

Safelik Convert by ProTemplates
Done