Hello guys! Welcome Back to another blogger tutorial. In this particular article, I'll tell you about how to add telegram icon with hover effect/Pulse effect. Before getting started, let me tell you what is floating Telegram Button in Blogger or website.
What is Floating Telegram Button
Floating Telegram Button is an type of contact or your telegram group link button that floats in blog page. When a user visits your page , this button will show him at the bottom right side of your each blog post and home page. This is a good option and trick to gain telegram followers fast.
Specification of telegram button
This floating Telegram Button will make a eye attention to your visitors. This is make them to click on it and hardly push them to check out your telegram. Here are the best sides of this floating button.
1) You can use it as a contact button as well as a social media button.
2) It will make a hover effect around itself to get caught easily by visitors.
3) It can help to boost your telegram followers.
4) It is responsive Design based button.
5) It has a smooth Animation without any lag.
6) It will make your blog looking more professional.
7) You can change the hover colour, size , speed as per your requirements.
8) Bass Yar Bahot hai itna .....
How to add telegram floating button
Well this is bit easy than making a blog. You've to just these simple steps to get it on your blog;
1. Go to your blogger Dashboard.
2. Go to Layout Section.
3. Create a New Widget/Gadget.
4. Click on Html/javascript option.
5. Paste all the codes here and click on save.
6. Save your all change.
Now, preview the changes and if any error occurs ( which has a probability of 1/10) please let me know in the comment section, I will reply you as soon as possible.
Telegram Floating Button HTML CSS Codes
Here is the code of telegram floating button HTML CSS. You can simply copy paste these codes in your blog. Before publishing, please change the url of telegram group.
<style> .tgplsdk { position: fixed; bottom: 30px; right: 30px; z-index: 1000; } .tgicn { border-radius: 50px; 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 22px rgba(0, 136, 204, 0); } } .tgicn svg { width: 50px; height: 50px; }
@media screen and (min-width: 485px) {
.tgplsdk svg{
width: 80px; height: 80px;
} } </style>
<a class='tgplsdk' href='https://t.me/LikeAStore' target='_blank'> <div class='tgicn'> <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><lineargradient gradientunits="userSpaceOnUse" id="linear-gradient" x2="502.697" y1="512" y2="9.303"><stop offset="0" stop-color="#2081c7"/><stop offset="1" stop-color="#38afe2"/></stop></stop></lineargradient></defs></svg></div></a>
Conclusion
In this particular article I've been told you , how to add telegram pulse button in blogger and give the html css codes wih a picture step by step guide.
I hope you like this post and thank you so much for visiting and reading this post.
Let us meet with a new post.
Jai Hind, Jai Shree Ram!