Ubah Blog Anda Jadi Media Profesional: Pasang Widget Berita Terkait Grid Card V4.0 Paling Modern

<div class="related-news-container">
    <h2 class="widget-title">Berita Lainnya dalam Kategori Ini</h2>
    <div class="posts-list" id="related-posts-list">
        <div class="loading-spinner-container">
            <div class="loading-spinner"></div>
            <p class="loading-text">Memuat berita...</p>
        </div>
    </div>
</div>

<style>
    /* 1. Reset & Global Styles */
    .related-news-container * {
        font-family: 'Inter', sans-serif;
        box-sizing: border-box; 
    }

    /* 2. Main Container Styling */
    .related-news-container {
        padding: 25px;
        margin: 20px 0;
        border-radius: 16px;
        background-color: #f7f9fc; /* Latar belakang sangat terang */
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); /* Bayangan lembut */
    }

    /* 3. Title Styling */
    .widget-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: #00796b; /* Warna Teal yang Kuat */
        border-bottom: 4px solid #ff9800; /* Aksen Oranye Cerah */
        padding-bottom: 10px;
        margin-bottom: 30px;
        text-align: center;
    }

    /* 4. Responsive Grid Setup */
    .posts-list {
        display: grid;
        /* Grid 3-kolom: Otomatis menyesuaikan 280px per kolom */
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
        gap: 25px; /* Jarak antar kartu */
        padding: 0;
        list-style: none;
    }

    /* 5. Card Styling (Vertical Layout) */
    .post-card {
        background-color: #ffffff;
        border-radius: 12px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column; /* Konten ditumpuk vertikal */
        height: 100%; 
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .post-card:hover {
        transform: translateY(-5px); /* Efek angkat */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
    }

    /* 6. Thumbnail Area */
    .post-card-thumb {
        width: 100%;
        height: 200px; /* Tinggi gambar yang mencolok */
        flex-shrink: 0; 
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-bottom: 1px solid #eee;
    }
    
    .post-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .post-card:hover .post-card-thumb img {
        transform: scale(1.08); /* Efek zoom */
    }
    
    /* Fallback Icon Style (Jika tidak ada gambar) */
    .thumb-fallback {
        opacity: 0.6;
        color: #00796b;
        font-size: 3rem; 
    }

    /* 7. Card Content */
    .post-card-content {
        padding: 15px 20px;
        flex-grow: 1; /* Konten mengisi sisa ruang */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Tag Kategori (Diambil dari label pertama) */
    .post-card-tag {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 700;
        color: #ff9800; /* Warna Oranye */
        border: 1px solid #ff9800;
        background-color: #fff3e0;
        padding: 3px 8px;
        border-radius: 6px;
        margin-bottom: 10px;
        text-transform: uppercase;
        max-width: fit-content;
    }

    .post-card-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 10px; 
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Batasi 2 baris */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Cuplikan Singkat (Snippet) */
    .post-card-snippet {
        font-size: 0.9rem;
        color: #7f8c8d;
        margin-top: 5px;
        margin-bottom: 15px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Batasi 3 baris */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Footer dan Tanggal */
    .post-card-footer {
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
        width: 100%;
    }

    .post-card-date {
        font-size: 0.8rem;
        color: #95a5a6;
        text-align: left; 
    }

    /* 8. Loading Spinner */
    .loading-spinner-container {
        text-align: center;
        grid-column: 1 / -1; 
        padding: 40px;
    }
    .loading-spinner {
        border: 4px solid #f3f3f3;
        border-top: 4px solid #00796b; 
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 0 auto 10px;
    }
    .loading-text {
        color: #555;
        font-style: italic;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* 9. Media Queries (Responsif) */
    @media (max-width: 600px) {
        .related-news-container {
            padding: 15px;
            border-radius: 10px;
        }
        .widget-title {
            font-size: 1.4rem;
        }
        .post-card-thumb {
            height: 150px; 
        }
        .post-card-content {
            padding: 12px 15px;
        }
        .post-card-title {
            font-size: 1rem;
        }
    }
</style>

<script>
    // Konfigurasi Penting
    // ===================================================================================================

    // >>> UBAH LABEL INI <<<
    // Ganti dengan label berita yang ingin Anda tampilkan (Contoh: "Pendidikan")
    const TARGET_LABEL = 'Strategi DM Lembaga Pendidikan';

    // Jumlah maksimal postingan yang ditampilkan
    const MAX_POSTS = 50; 

    // TIDAK PERLU DIUBAH
    const BLOG_URL = 'https://' + window.location.hostname;
    const CONTAINER_ID = 'related-posts-list';

    // ======================================================================================================

    /**
     * Fungsi untuk memproses data feed dari Blogger (JSON-P Callback)
     */
    function showRelatedPosts(json) {
        const container = document.getElementById(CONTAINER_ID);
        let postsHTML = '';
        let postsCount = 0;

        if (!container) {
            console.error('Kontainer postingan tidak ditemukan.');
            return;
        }

        // Bersihkan loader
        container.innerHTML = '';

        if (json.feed.entry && json.feed.entry.length > 0) {
            json.feed.entry.forEach(entry => {
                if (postsCount >= MAX_POSTS) return;

                // 1. Ambil Judul
                const title = entry.title.$t;

                // 2. Ambil Link
                let postUrl = '';
                for (let i = 0; i < entry.link.length; i++) {
                    if (entry.link[i].rel === 'alternate') {
                        postUrl = entry.link[i].href;
                        break;
                    }
                }

                // 3. Ambil Tanggal
                const dateRaw = new Date(entry.published.$t);
                const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
                const formattedDate = dateRaw.toLocaleDateString('id-ID', dateOptions);

                // 4. Ambil Gambar Mini (Thumbnail) - Menggunakan s400-c untuk kualitas yang lebih baik
                let thumbnailUrl = null;
                if (entry.media$thumbnail && entry.media$thumbnail.url) {
                    thumbnailUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s400-c/').replace(/\/s\d+/, '/s400');
                } else if (entry.content && entry.content.$t) {
                    const content = entry.content.$t;
                    const imgMatch = content.match(/<img[^>]+src="([^">]+)"/);
                    if (imgMatch) {
                        thumbnailUrl = imgMatch[1].replace(/\/s\d+/, '/s400');
                    }
                }

                // 5. Ambil Cuplikan (Snippet)
                let snippetRaw = entry.summary ? entry.summary.$t : (entry.content ? entry.content.$t : '');
                snippetRaw = snippetRaw.replace(/<[^>]+>/g, '').trim();
                const snippet = snippetRaw.substring(0, 150) + (snippetRaw.length > 150 ? '...' : '');

                // 6. Ambil Label/Tag untuk ditampilkan (Gunakan label pertama)
                const displayTag = entry.category && entry.category.length > 0
                    ? entry.category[0].term
                    : 'BERITA KATEGORI'; 

                // 7. Bangun HTML untuk Thumbnail atau Fallback Icon (SVG)
                const fallbackIcon = `<svg class="thumb-fallback" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>`;

                const thumbnailHtml = thumbnailUrl 
                    ? `<div class="post-card-thumb"><img src="${thumbnailUrl}" alt="${title}" loading="lazy" onerror="this.onerror=null; this.src='https://placehold.co/400x200/e0f7fa/00796b?text=NEWS+CARD';"></div>`
                    : `<div class="post-card-thumb">${fallbackIcon}</div>`;

                // 8. Bangun Kartu HTML Lengkap
                postsHTML += `
                    <a href="${postUrl}" class="post-card" target="_top">
                        ${thumbnailHtml}
                        <div class="post-card-content">
                            <span class="post-card-tag">${displayTag.toUpperCase()}</span>
                            <h3 class="post-card-title">${title}</h3>
                            <p class="post-card-snippet">${snippet}</p>
                            <div class="post-card-footer">
                                <span class="post-card-date">Dipublikasikan: ${formattedDate}</span>
                            </div>
                        </div>
                    </a>
                `;
                postsCount++;
            });

            if (postsHTML) {
                container.innerHTML = postsHTML;
            } else {
                container.innerHTML = `<p style="text-align: center; color: #555; padding: 40px;">Tidak ada berita terkait ditemukan untuk label "<b>${TARGET_LABEL}</b>".</p>`;
            }

        } else {
            container.innerHTML = `<p style="text-align: center; color: #555; padding: 40px;">Tidak ada data feed yang tersedia.</p>`;
        }
    }

    /**
     * Fungsi utama untuk memuat script JSON-P dari Blogger Feed
     */
    function loadRelatedPosts() {
        const encodedLabel = encodeURIComponent(TARGET_LABEL);
        const feedUrl = `${BLOG_URL}/feeds/posts/default/-/${encodedLabel}?alt=json-in-script&max-results=${MAX_POSTS}&orderby=published&callback=showRelatedPosts`;

        const script = document.createElement('script');
        script.src = feedUrl;
        script.onerror = function() {
            const container = document.getElementById(CONTAINER_ID);
            if(container) {
                container.innerHTML = `<p style="text-align: center; color: red; padding: 40px;">Gagal memuat data. Pastikan nama label sudah benar dan feed publik.</p>`;
            }
        };

        // Memasukkan script ke dalam dokumen
        document.head.appendChild(script);
    }

    // Memastikan fungsi callback dapat diakses
    window.showRelatedPosts = showRelatedPosts;
    
    // Mulai memuat data
    loadRelatedPosts();
</script>