Automatic Blogger Stats Widget Without Manual Update

Simple Blogger Website Stats Widget Tutorial

Website stats give you valuable insights into your blogs activity such as the number of posts you have published and the total comments from your readers. These stats help you measure engagement and track the amount of content you have produced over time.

Table of Contents

Purpose of the Website Stats Widget

This widget displays important website statistics such as total posts, total comments and total pages. It helps visitors and blog owners quickly understand the size and activity of a Blogger website.

Clean and Attractive Layout

The stats are shown inside a well designed container with cards. Each card has a title, icon and number. It making the information easy to read and visually appealing.

Html Code

HTML Code

<!-- Font Awesome & Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<div class="BgIstr_stats_container">
    <h3 class="Stats_heading"><span>📊 Website Stats</span></h3>
    <div class="website_stats">
        <div class="webStsC">
            <div class="stats">
                <div class="statsName"><i class="fas fa-file-alt"></i> Total Posts</div>
                <div class="statsNumber" id="total-posts">Loading...</div>
            </div>
        </div>

        <div class="webStsC">
            <div class="stats">
                <div class="statsName"><i class="fas fa-comments"></i> Total Comments</div>
                <div class="statsNumber" id="total-comments">Loading...</div>
            </div>
        </div>

        <div class="webStsC">
            <div class="stats">
                <div class="statsName"><i class="fas fa-file"></i> Total Pages</div>
                <div class="statsNumber" id="total-pages">Loading...</div>
            </div>
        </div>
    </div>
</div>

<style>
.BgIstr_stats_container {
    font-size: 1rem;
    color: #08102b;
    text-align: center;
    margin: 20px auto;
    font-family: 'Poppins', sans-serif;
}

.Stats_heading {
    margin: 15px auto;
    font-size: 2rem;
    font-weight: 800;
    color: #2b2d42;
}

.website_stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 12px auto;
}

.webStsC {
    background-color: #fbfbfb;
    display: flex;
    justify-content: center;
    padding: 12px;
    width: 280px;
    margin: 12px;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    transition: all 0.3s ease;
}

.statsName {
    font-size: 1.2rem;
    color: #333;
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

.statsNumber {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 10px;
}

.webStsC:hover {
    transform: scale(1.03);
    background: linear-gradient(to right, #00b4db, #0083b0);
    color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
    .webStsC {
        width: 90%;
    }
}
</style>

<script>
function fetchBlogStats() {
    // Fetch total posts
    fetch('/feeds/posts/default?alt=json')
        .then(response => response.json())
        .then(data => {
            document.getElementById('total-posts').textContent =
                data.feed.openSearch$totalResults.$t;
        });

    // Fetch total comments
    fetch('/feeds/comments/default?alt=json')
        .then(response => response.json())
        .then(data => {
            document.getElementById('total-comments').textContent =
                data.feed.openSearch$totalResults.$t;
        });

    // Fetch total pages
    fetch('/feeds/pages/default?alt=json')
        .then(response => response.json())
        .then(data => {
            document.getElementById('total-pages').textContent =
                data.feed.openSearch$totalResults.$t;
        });
}

document.addEventListener('DOMContentLoaded', fetchBlogStats);
</script>
    

Just copy the above mentioned code and paste where you want to show blogger stats

Stats Heading Section

At the top a heading labeled Website Stats clearly explains the purpose of the widget. The emoji adds a friendly and modern touch to the design.

Individual Stats Cards

Each stat is displayed in its own box such as Total Posts, Total Comments and Total Pages. This separation helps users understand each value clearly without confusion.

Responsive and Mobile Friendly Design

The layout uses flexible styling so the stats automatically adjust on small screens. On mobile devices the cards stack vertically for better readability.

Hover Effects for Better Interaction

When users hover over a stats card it changes color and slightly enlarges. This interactive effect improves user experience and makes the widget more engaging.

Fetching Live Data from Blogger

The JavaScript code uses Blogger JSON feed to fetch real time data. It counts posts, comments and pages directly from the blog without manual updates.

Automatic Loading on Page Open

The stats load automatically when the page opens using the DOMContentLoaded event. This ensures the numbers are updated every time the page is viewed.