How to add Number Counter to Blogspot

[tuanphan]

To add Number Counter to Blogspot.

• Number Counter

• Number will run on scroll

#Option 1. Use HTML Embed Code

You can also use this free tool, so you can add Number Counter easier.

#1. Edit Page (or Post) where you want to add Number Counter

#2. Place cursor at position where you want to add Number Counter

#3 . Click icon in top left of Editor

Choose HTML view

#4 . Paste this HTML embed code

<style>
    .counter-container {
        display: flex;
        justify-content: space-around;
        padding: 50px 20px;
        text-align: center;
        background-color: white;
        font-family: Arial, sans-serif;
    }
    
    .counter-item {
        padding: 20px;
    }
    
    .counter {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .counter-text {
        font-size: 16px;
        color: #666;
    }
</style>
<div class="counter-container">
    <div class="counter-item">
        <div class="counter" data-target="10000" data-suffix="+">0</div>
        <div class="counter-text">Customers we have served</div>
    </div>
    
    <div class="counter-item">
        <div class="counter" data-target="97" data-suffix="%">0</div>
        <div class="counter-text">Of our clients recommend us</div>
    </div>
    
    <div class="counter-item">
        <div class="counter" data-target="30" data-suffix="+">0</div>
        <div class="counter-text">Years of meeting client needs</div>
    </div>
</div>
<script>
        const counters = document.querySelectorAll('.counter');
        let counted = false;
        
        function startCounting() {
            counters.forEach(counter => {
                const target = +counter.getAttribute('data-target');
                const suffix = counter.getAttribute('data-suffix') || '';
                const increment = target / 100;
                
                const updateCounter = () => {
                    const count = +counter.innerText.replace(/[^0-9.-]+/g, '');
                    if (count < target) {
                        counter.innerText = Math.ceil(count + increment) + suffix;
                        setTimeout(updateCounter, 15);
                    } else {
                        counter.innerText = target + suffix;
                    }
                };
                
                updateCounter();
            });
        }
        
        const counterSection = document.querySelector('.counter-container');
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting && !counted) {
                    counted = true;
                    startCounting();
                }
            });
        }, { threshold: 0.1 });
        
        observer.observe(counterSection);
    </script>

#5. To change Number, you can change these lines.

To change text, change these

To change number style, change this.

To change text style, change this.

To change white background around number counter, change this.

#Option 2. Use Number Counter Widget

Toadd Number Counter to Blogspot, you can use this free tool. Follow these steps.

#1. First, access this free tool and click Create widget for free

#2. Choose Number Counte r layout and click Continue with this template .

#3. Next, Add Content

You can also Edit numbers, style layout here then click Add to website for free.

#4. Next, Click Publish on top right

#5. Choose Free Plan and click Copy Code .

#6. Click icon in top left of Editor

Choose HTML view

#7. Paste this HTML embed code

#8. Result