How to create a Floating Telegram Button in Blogger
 |
| © Copyright 2024 Tecky AaryaN |
Is it your intention to include a chat button on your website? If that's the case, you might want to add a Telegram button that moves and
moves animatedly. In this Article I will show you How to Add an Animated Floating Telegram Button In Blogger?
This trendy features highlight permits guests or users to effectively associate with you on the famous Telegram application, making a
consistent method for keeping in contact and get refreshes.
ANIMATED FLOATING TELEGRAM
You can see the demo here⤵
Step 1: Go to Blogger.
Step 2: Go to EDIT HTML.
Step 3: Now Find the Following Code.
Step 4: Now paste the Following Code in below
</footer> tag
<a class='telegram-float' href='https://t.me/teckyaaryan' target='_blank'>
<div class='telegram-icon'>
<svg viewBox='0 0 64 64'><path d='M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z'/></svg>
</div>
</a>
Step 5: Now add the CSS Code paste Above
</head> Tag.<style>
.telegram-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.telegram-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #0088cc;
display: flex;
justify-content: center;
align-items: center;
animation-name: pulse;
animation-duration: 1.5s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5);
}
80% {
box-shadow: 0 0 0 14px rgba(0, 136, 204, 0);
}
}
.telegram-icon svg {
fill: #fff;
width: 30px;
height: 30px;
}
</style>
Powerful & Blogger Related CONTENT Tech Ankur
To appreciate our works, consider keeping the credits in codes. We don't allow to rewrite this post in any manner. Don't copy this post, codes or any part from this article without Permission, it is strictly prohibited. If you do so, Legal Actions will be taken.
Copyright
