Menampilkan Feed Page Post and Post Blogger

Sst, this is my "home" style :-)


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitemap</title>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .my-category {
            font-weight: bold;
            margin-top: 20px;
            text-align: center;
        }
        .my-link-list {
            margin-left: 0;
            padding-left: 0;
            list-style: none;
        }
        .my-link-item {
            margin: 5px 0;
        }
        .my-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center; /* Center the container */
            margin: 20px auto;
            max-width: 1200px;
        }
        .my-column {
            flex: 1;
            min-width: 100%;
            box-sizing: border-box;
            padding: 10px;
            text-align: center;
        }
        @media (min-width: 768px) {
            .my-column {
                min-width: 50%;
            }
        }
        @media (min-width: 992px) {
            .my-column {
                min-width: 33.33%;
            }
        }
        hr {
            margin: 40px 0;
            border: 0;
            border-top: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="my-container" id="my-content-container"></div>

    <script>
        async function fetchBlogspotData(feedUrl, isPost = true) {
            const response = await fetch(feedUrl);
            const data = await response.json();
            return data.feed.entry.map(entry => {
                const title = entry.title.$t;
                const url = entry.link.find(link => link.rel === 'alternate').href;
                if (isPost) {
                    // For posts, categories are labels
                    const labels = entry.category ? entry.category.map(cat => cat.term) : ['Uncategorized'];
                    return { title, url, labels };
                } else {
                    // For pages, categories are metadata in content
                    const content = entry.content.$t;
                    const categoryMatch = content.match(/<!-- Category:\s*(.*?)\s*-->/);
                    const category = categoryMatch ? categoryMatch[1] : 'Uncategorized';
                    return { title, url, labels: [category] }; // Using labels as categories for consistency
                }
            });
        }

        function groupByCategory(data) {
            const categoryMap = {};
            data.forEach(item => {
                item.labels.forEach(label => {
                    if (!categoryMap[label]) {
                        categoryMap[label] = [];
                    }
                    categoryMap[label].push(item);
                });
            });
            return categoryMap;
        }

        function createLinkItem(link) {
            return `
                <div class="my-link-item">
                    <i class="far fa-thumbs-up"></i> <a href="${link.url}" target="_blank">${link.title}</a>
                </div>
            `;
        }

        function createCategorySection(category, links) {
            return `
                <div class="my-category">
                    <i class="fa fa-th-large"></i> ${category}
                </div>
                <div class="my-link-list">
                    ${links.map(createLinkItem).join('')}
                </div>
            `;
        }

        async function renderContent() {
            const contentContainer = document.getElementById('my-content-container');
            const pagesData = await fetchBlogspotData('https://YOURBLOGNAME.blogspot.com/feeds/pages/default?alt=json&max-results=100', false);
            const postsData = await fetchBlogspotData('https://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=json&max-results=100');

            const pagesGrouped = groupByCategory(pagesData);
            const postsGrouped = groupByCategory(postsData);

            // Daftar kategori yang ingin disembunyikan
            const excludedCategories = ['satu', 'dua', 'Uncategorized'];

            // Render pages
            const pagesColumns = ['', '', ''];
            let i = 0;
            for (const [category, links] of Object.entries(pagesGrouped)) {
                if (!excludedCategories.includes(category)) {
                    pagesColumns[i % 3] += createCategorySection(category, links);
                    i++;
                }
            }

            pagesColumns.forEach(column => {
                const columnDiv = document.createElement('div');
                columnDiv.className = 'my-column';
                columnDiv.innerHTML = column;
                contentContainer.appendChild(columnDiv);
            });

            // Add separator
            contentContainer.innerHTML += '<hr>';

            // Render posts
            const postsColumns = ['', '', ''];
            i = 0;
            for (const [category, links] of Object.entries(postsGrouped)) {
                if (!excludedCategories.includes(category)) {
                    postsColumns[i % 3] += createCategorySection(category, links);
                    i++;
                }
            }

            postsColumns.forEach(column => {
                const columnDiv = document.createElement('div');
                columnDiv.className = 'my-column';
                columnDiv.innerHTML = column;
                contentContainer.appendChild(columnDiv);
            });
        }

        renderContent();
    </script>

    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Elang Note:

  1. Fetch Data:

    • Untuk pos, kategori diambil dari label.
    • Untuk halaman, kategori diambil dari metadata dalam konten (<!-- Category: Category1 -->).

  2. CSS:

    • Memastikan elemen-elemen berada di tengah halaman dengan penataan responsif.

  3. JavaScript:

    • Memisahkan halaman (pages) dan pos (posts) dengan <hr>.
    • Menyusun kategori dengan benar dan menampilkan kategori yang tidak termasuk dalam daftar yang dikecualikan.

Silakan mengganti https://YOURBLOGNAME.blogspot.com/feeds/pages/default?alt=json&max-results=100 dan https://YOURBLOGNAME.blogspot.com/feeds/posts/default?alt=json&max-results=100 dengan URL feed yang sesuai dengan blog Anda. Pastikan data dari kedua feed sesuai dengan struktur yang diharapkan.

Audio Title
0:00 / 0:00
Next Post Previous Post