How to add animated social follow icon in blogger website
For adding social follow icon in blogger website you have to paste the code inside the post in html section
<!-- 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/0029Vb61K6dGehEQuSGM8e0i" 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/asomiyavauna" rel="nofollow noopener noreferrer" target="_blank">
Join Now
</a>
</div>
<!-- End of Social Follow Button -->
0 Comments