Blogger HTML Sitemap Generator Code with Pagination, Category, and Skeleton Loader

In this post, we will cover how to implement a functional HTML sitemap for Blogger with pagination, category filtering, and a skeleton loader. Here is a steps:

HTML Code: Paste the given HTML code into your sitemap page.
CSS Styling: Add the CSS code in the sitemap page using <style> tag or in an <head> of your blogger.
JavaScript: Similarly, include the JavaScript code in your sitemap page within a <script> tag or in an blogger's <head> or just before the closing </body> tag.

<div id="sitemap-page">
    <div id="sitemap-content-posts">
        <h3>Blog Posts</h3>
        <div id="category-section">
            <label for="category-filter">Filter by Category:</label>
            <select id="category-filter" onchange="filterByCategory()">
                <option value="All">All</option>
            </select>
        </div>
        <div id="posts-container"></div>
        <div id="posts-pagination"></div>
    </div>
    <hr />
    <div id="sitemap-content-pages">
        <h3>Pages</h3>
        <div id="pages-container"></div>
        <div id="pages-pagination"></div>
    </div>
</div>

#sitemap-page .skeleton-loader {
    background-color: #ddd;
    border-radius: 4px;
    width: 100%;
    height: 20px;
    margin-bottom: 10px;
    animation: skeleton-animation 1.2s ease-in-out infinite;
}

#sitemap-page .skeleton-loader.large {
    height: 40px;
}

@keyframes skeleton-animation {
    0% {
        background-color: #ddd;
    }
    50% {
        background-color: #e0e0e0;
    }
    100% {
        background-color: #ddd;
    }
}

#sitemap-page h2, #sitemap-page h3 {
    margin: 0;
    padding: 10px 0;
}

#sitemap-page #category-section {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
}

#sitemap-page #category-filter {
    background: transparent;
    color: inherit;
    border: 1px solid #ccc;
    padding: 5px 10px;
    border-radius: 5px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

#sitemap-page #category-filter:focus {
    outline: none;
    border-color: #385ec9;
}

#sitemap-page #posts-container, #sitemap-page #pages-container {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
}

#sitemap-page ul {
    padding-left: 0;
    margin: 0;
}

#sitemap-page li {
    margin: 5px 0;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    list-style: none;
}

#sitemap-page li:last-child {
    border-bottom: none;
}

#sitemap-page li a {
    text-decoration: none;
    color: inherit;
    display: block;
}

#sitemap-page li a:hover {
    color: #385ec9;
}

#sitemap-page #posts-pagination, #sitemap-page #pages-pagination {
    margin-top: 20px;
}

#sitemap-page #posts-pagination a, #sitemap-page #pages-pagination a {
    margin: 0 5px;
    text-decoration: none;
    color: #385ec9;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#sitemap-page #posts-pagination a:hover, #sitemap-page #pages-pagination a:hover {
    font-weight: bold;
    background-color: #f0f0f0;
}

const postsPerPage = 10;
const pagesPerPage = 10;
let currentPostPage = 1;
let currentPagePage = 1;
let sitemap = {};
let pages = [];
let allPosts = new Set();

function createSitemap() {
    // Show skeleton loaders before fetching data
    showSkeletonLoader('posts');
    showSkeletonLoader('pages');

    // Fetch posts data
    fetch('/feeds/posts/default?alt=json')
        .then(response => response.json())
        .then(data => {
            data.feed.entry.forEach(entry => {
                let title = entry.title.$t;
                let url = entry.link.find(link => link.rel === 'alternate').href;
                let labels = entry.category ? entry.category.map(cat => cat.term) : ['Uncategorized'];

                if (!allPosts.has(url)) {
                    allPosts.add(url);
                    if (!sitemap['All']) {
                        sitemap['All'] = [];
                    }
                    sitemap['All'].push({ title, url });
                }

                labels.forEach(label => {
                    if (!sitemap[label]) {
                        sitemap[label] = [];
                        const option = document.createElement('option');
                        option.value = label;
                        option.text = label;
                        document.getElementById('category-filter').appendChild(option);
                    }
                    sitemap[label].push({ title, url });
                });
            });

            hideSkeletonLoader('posts'); // Hide skeleton loader after posts are loaded
            renderPosts(); // Render posts after hiding skeleton
        })
        .catch(error => {
            console.error('Error fetching posts:', error);
            hideSkeletonLoader('posts');
            document.getElementById('posts-container').innerHTML = '<p>Error loading posts.</p>';
        });

    // Fetch pages data
    fetch('/feeds/pages/default?alt=json')
        .then(response => response.json())
        .then(data => {
            data.feed.entry.forEach(entry => {
                let title = entry.title.$t;
                let url = entry.link.find(link => link.rel === 'alternate').href;
                pages.push({ title, url });
            });

            hideSkeletonLoader('pages'); // Hide skeleton loader after pages are loaded
            renderPages(); // Render pages after hiding skeleton
        })
        .catch(error => {
            console.error('Error fetching pages:', error);
            hideSkeletonLoader('pages');
            document.getElementById('pages-container').innerHTML = '<p>Error loading pages.</p>';
        });
}

function renderPosts(category = 'All') {
    const container = document.getElementById('posts-container');
    const pagination = document.getElementById('posts-pagination');
    container.innerHTML = '';
    pagination.innerHTML = '';

    let posts = sitemap[category] || [];
    const totalPages = Math.ceil(posts.length / postsPerPage);
    const startIndex = (currentPostPage - 1) * postsPerPage;
    const endIndex = startIndex + postsPerPage;

    posts.slice(startIndex, endIndex).forEach(post => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `<a href="${post.url}">${post.title}</a>`;
        container.appendChild(listItem);
    });

    if (totalPages > 1) {
        for (let i = 1; i <= totalPages; i++) {
            const pageLink = document.createElement('a');
            pageLink.href = '#';
            pageLink.textContent = i;
            if (i === currentPostPage) {
                pageLink.style.fontWeight = 'bold';
            }
            pageLink.onclick = function (e) {
                e.preventDefault();
                currentPostPage = i;
                renderPosts(category);
            };
            pagination.appendChild(pageLink);
        }
    }
}

function renderPages() {
    const container = document.getElementById('pages-container');
    const pagination = document.getElementById('pages-pagination');
    container.innerHTML = '';
    pagination.innerHTML = '';

    const totalPages = Math.ceil(pages.length / pagesPerPage);
    const startIndex = (currentPagePage - 1) * pagesPerPage;
    const endIndex = startIndex + pagesPerPage;

    pages.slice(startIndex, endIndex).forEach(page => {
        const listItem = document.createElement('li');
        listItem.innerHTML = `<a href="${page.url}">${page.title}</a>`;
        container.appendChild(listItem);
    });

    if (totalPages > 1) {
        for (let i = 1; i <= totalPages; i++) {
            const pageLink = document.createElement('a');
            pageLink.href = '#';
            pageLink.textContent = i;
            if (i === currentPagePage) {
                pageLink.style.fontWeight = 'bold';
            }
            pageLink.onclick = function (e) {
                e.preventDefault();
                currentPagePage = i;
                renderPages();
            };
            pagination.appendChild(pageLink);
        }
    }
}

function filterByCategory() {
    currentPostPage = 1; // Reset to first page when changing category
    const category = document.getElementById('category-filter').value;
    renderPosts(category);
}

function showSkeletonLoader(type) {
    const container = type === 'posts' ? document.getElementById('posts-container') : document.getElementById('pages-container');
    container.innerHTML = ''; // Clear any existing content

    for (let i = 0; i < 5; i++) { // Add 5 skeleton loaders as placeholders
        const skeleton = document.createElement('div');
        skeleton.className = 'skeleton-loader';
        container.appendChild(skeleton);
    }
}

function hideSkeletonLoader(type) {
    const container = type === 'posts' ? document.getElementById('posts-container') : document.getElementById('pages-container');
    container.innerHTML = ''; // Clear skeleton loaders
}

createSitemap();

Following these steps will help you set up an efficient and visually appealing sitemap for your Blogger site.

FAQ

Is this sitemap compatible with all Blogger templates?

This sitemap is compatible with most Blogger templates. However, it was specifically designed for the Fletro Pro theme. Users can modify the code to fit their own theme or preferences as there are no restrictions on its usage.

Are there any special attributes required to use this code?

No special attributes are required to use this code. You can simply paste the HTML, CSS, and JavaScript into your sitemap page as described in the implementation steps.

Can I customize this code according to my needs?

Yes, you can modify the code as needed to fit your preferences. The code is designed to be flexible and adaptable to various requirements.

How should I include the CSS and JavaScript code?

You should include the CSS code either directly in the sitemap page using a <style> tag or in an external stylesheet linked in the <head> of your page. Similarly, include the JavaScript code within a <script> tag in the sitemap page or in an external JavaScript file linked in the <head> or before the closing </body> tag.

TamilBlog+

Search Suggest

Blogger HTML Sitemap Generator Code with Pagination, Category, and Skeleton Loader

FAQ