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 -->