Animated Social Follow Button in Blogger

In this video, I will show you How you can add an Animated social Follow Button to your Blogger website. Here, We have added a Blinking Whatsapp and Telegram Follow button which attract user attention and encourage users to click on it.

Code

Add Before or after <data:post.body/> in Blogger Theme code.

<!-- Social Follow Button -->
<style>
    .social-card {
        margin-bottom: 20px;
        position: relative;
        border: 2px solid transparent;
        border-radius: 5px;
        background: #f0f8ff;
        display: flex;
        align-items: center;
        padding: 7px;
        justify-content: space-between;
        overflow: hidden;
        font-family:system-ui;
    }

    .social-card--whatsapp {
        animation: whatsapp-border-animation 1s infinite;
    }

    .social-card--telegram {
        animation: telegram-border-animation 1s infinite;
    }

    .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: bold;
        text-decoration: none;
        padding: 5px 20px;
        border-radius: 2px;
        flex-shrink: 0;
        transition: all 0.3s ease-in-out;
        color: white !important;
    }

    .social-link:hover {
        transform: scale(1.05);
    }

    .social-card--whatsapp .social-link {
        background: #25d366;
    }

    .social-card--telegram .social-link {
        background: #004F7A;
    }

    /* Define icon size */
    .icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }

    @keyframes whatsapp-border-animation {
        0%, 100% { border-color: transparent; }
        50% { border-color: #25d366; }
    }

    @keyframes telegram-border-animation {
        0%, 100% { border-color: transparent; }
        50% { border-color: #004F7A; }
    }
</style>

<div class="social-card social-card--whatsapp">
    <span style="display: flex; align-items: center;">
        <svg class="icon" fill="#128c7e" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="#128c7e" stroke-width="0.00016">
            <path d="M11.42 9.49c-.19-.09-1.1-.54-1.27-.61s-.29-.09-.42.1-.48.6-.59.73-.21.14-.4 0a5.13 5.13 0 0 1-1.49-.92 5.25 5.25 0 0 1-1-1.29c-.11-.18 0-.28.08-.38s.18-.21.28-.32a1.39 1.39 0 0 0 .18-.31.38.38 0 0 0 0-.33c0-.09-.42-1-.58-1.37s-.3-.32-.41-.32h-.4a.72.72 0 0 0-.5.23 2.1 2.1 0 0 0-.65 1.55A3.59 3.59 0 0 0 5 8.2 8.32 8.32 0 0 0 8.19 11c.44.19.78.3 1.05.39a2.53 2.53 0 0 0 1.17.07 1.93 1.93 0 0 0 1.26-.88 1.67 1.67 0 0 0 .11-.88c-.05-.07-.17-.12-.36-.21z"></path>
            <path d="M13.29 2.68A7.36 7.36 0 0 0 8 .5a7.44 7.44 0 0 0-6.41 11.15l-1 3.85 3.94-1a7.4 7.4 0 0 0 3.55.9H8a7.44 7.44 0 0 0 5.29-12.72zM8 14.12a6.12 6.12 0 0 1-3.15-.87l-.22-.13-2.34.61.62-2.28-.14-.23a6.18 6.18 0 0 1 9.6-7.65 6.12 6.12 0 0 1 1.81 4.37A6.19 6.19 0 0 1 8 14.12z"></path>
        </svg>
        <span style="font-weight: bold; font-size: 0.9rem;">WhatsApp Group</span>
    </span>
    <a class="social-link" href="https://whatsapp.com/channel/0029Va9lQTiC1Fu7vLWgMu0c" rel="nofollow noopener noreferrer" target="_blank">
        Join Now
    </a>
</div>

<div class="social-card social-card--telegram">
    <span style="display: flex; align-items: center;">
        <svg class="icon" fill="#24A1DE" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M19.2,4.4L2.9,10.7c-1.1,0.4-1.1,1.1-0.2,1.3l4.1,1.3l1.6,4.8c0.2,0.5,0.1,0.7,0.6,0.7c0.4,0,0.6-0.2,0.8-0.4 c0.1-0.1,1-1,2-2l4.2,3.1c0.8,0.4,1.3,0.2,1.5-0.7l2.8-13.1C20.6,4.6,19.9,4,19.2,4.4z M17.1,7.4l-7.8,7.1L9,17.8L7.4,13l9.2-5.8 C17,6.9,17.4,7.1,17.1,7.4z"></path>
        </svg>
        <span style="font-weight: bold; font-size: 0.9rem;">Telegram Group</span>
    </span>
    <a class="social-link" href="https://t.me/key2blogging" rel="nofollow noopener noreferrer" target="_blank">
        Join Now
    </a>
</div>
<!-- End of Social Follow Button -->