Telegram floating button with pulse effect html css
Dhanjee Rider
Are you also using social plugins on your site but no one is joining your Telegram group, then you need to attract people's attention towards you, for this you will have to lift your Telegram button from the bottom and put it in the middle so that people always see it and while ignoring it, they click on it and join your channel or group. So to accomplish this today we have brought a code which is made with the help of HTML and CSS which will embed the link of your Telegram channel in the middle of your website and the user cannot remove it even if he wants to and by seeing it again and again, he will definitely join your Telegram channel 🗿|
To apply this code in your blogger, first of all you have to go to the Edit HTML section of your blogger and add this CSS above the close </head> there
@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: 20px; height: 20px; }
.tgf{position: fixed; top: 75%; right: 0; transform: translateY(-50%); z-index: 9999; background-color: white; border-radius: 30px; padding: 5px 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
animation:pulse 2s infinite;
border: .5px solid gray;
}
.cls-1 {
fill: #cf5915;
}
.cls-2 {
fill: #ff8721;
}
.cls-3 {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 3px;
}
.cls-4 {
fill: #1d78b5;
}
.cls-5 {
fill: #2fa8df;
}
.cls-6 {
fill: #fff;
}
.tgf a svg{width: 34px; }
After that you have to go to the bottom near the close body tag and add this HTML code above </body>
<div class="tgf">
<a href="https://telegram.me/bloging_help" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: black;">
<svg data-name="Слой 1" id="Слой_1" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><defs>
</defs><path class="cls-1" d="M92,48v.13A44,44,0,1,1,47.87,4H48c1.06,0,2.11,0,3.16.12a42.89,42.89,0,0,1,5.12.67,43.39,43.39,0,0,1,8.1,2.37A44.13,44.13,0,0,1,88.79,31.47a43.22,43.22,0,0,1,2.43,8.24h0a44,44,0,0,1,.67,5.17C92,45.92,92,47,92,48Z"/><path class="cls-2" d="M91,44.5v.12A39.53,39.53,0,1,1,51.38,5h.12c1,0,1.89,0,2.84.11a38.38,38.38,0,0,1,4.59.6,39.33,39.33,0,0,1,5.45,1.45A44.13,44.13,0,0,1,88.79,31.47a38.33,38.33,0,0,1,1.51,5.59h0a39.22,39.22,0,0,1,.6,4.64C91,42.63,91,43.57,91,44.5Z"/><path class="cls-3" d="M74.66,21.93a36.47,36.47,0,0,1,3,3.52"/><path class="cls-3" d="M58,12a38.11,38.11,0,0,1,11.78,5.76"/><path class="cls-4" d="M92,48v.13A44,44,0,1,1,47.87,4H48c1.06,0,2.11,0,3.16.12a42.89,42.89,0,0,1,5.12.67,43.39,43.39,0,0,1,8.1,2.37A44.13,44.13,0,0,1,88.79,31.47a43.22,43.22,0,0,1,2.43,8.24h0a44,44,0,0,1,.67,5.17C92,45.92,92,47,92,48Z"/><path class="cls-5" d="M91,44.5v.12A39.53,39.53,0,1,1,51.38,5h.12c1,0,1.89,0,2.84.11a38.38,38.38,0,0,1,4.59.6,39.33,39.33,0,0,1,5.45,1.45A44.13,44.13,0,0,1,88.79,31.47a38.33,38.33,0,0,1,1.51,5.59h0a39.22,39.22,0,0,1,.6,4.64C91,42.63,91,43.57,91,44.5Z"/><path class="cls-3" d="M74.66,21.93a36.47,36.47,0,0,1,3,3.52"/><path class="cls-3" d="M58,12a38.11,38.11,0,0,1,11.78,5.76"/><path class="cls-6" d="M65,29.24,24.73,44.78c-1.64.66-1.84,2.65-.17,3.22l10.2,3.6L58.68,36.49a.45.45,0,0,1,.54.71L40.4,54.11l-1.27,10a.74.74,0,0,0,1.26.62l6-5.94,10.08,7.83A2.35,2.35,0,0,0,59.8,65.2L67,30.85A1.43,1.43,0,0,0,65,29.24Z"/></path></path></path></path></path></path></path></path></path></svg>
<span style="margin-left: 10px;"><b>Join Telegram Group</b></span>
</a>
</div>
After that go to your website and refresh it, you will get the button
Another way to button
And if you do not want to go to edit HTML, then copy these two codes and keep them together, after that go to Layout and take a gadget in the side bar, take the HTML and JavaScript gadget, paste these two codes in it and save your work. Will be done
<div class="tgf">
<a href="https://telegram.me/bloging_help" target="_blank" style="display: flex; align-items: center; text-decoration: none; color: black;">
<svg data-name="Слой 1" id="Слой_1" viewbox="0 0 96 96" xmlns="http://www.w3.org/2000/svg"><defs>
</defs><path class="cls-1" d="M92,48v.13A44,44,0,1,1,47.87,4H48c1.06,0,2.11,0,3.16.12a42.89,42.89,0,0,1,5.12.67,43.39,43.39,0,0,1,8.1,2.37A44.13,44.13,0,0,1,88.79,31.47a43.22,43.22,0,0,1,2.43,8.24h0a44,44,0,0,1,.67,5.17C92,45.92,92,47,92,48Z"/><path class="cls-2" d="M91,44.5v.12A39.53,39.53,0,1,1,51.38,5h.12c1,0,1.89,0,2.84.11a38.38,38.38,0,0,1,4.59.6,39.33,39.33,0,0,1,5.45,1.45A44.13,44.13,0,0,1,88.79,31.47a38.33,38.33,0,0,1,1.51,5.59h0a39.22,39.22,0,0,1,.6,4.64C91,42.63,91,43.57,91,44.5Z"/><path class="cls-3" d="M74.66,21.93a36.47,36.47,0,0,1,3,3.52"/><path class="cls-3" d="M58,12a38.11,38.11,0,0,1,11.78,5.76"/><path class="cls-4" d="M92,48v.13A44,44,0,1,1,47.87,4H48c1.06,0,2.11,0,3.16.12a42.89,42.89,0,0,1,5.12.67,43.39,43.39,0,0,1,8.1,2.37A44.13,44.13,0,0,1,88.79,31.47a43.22,43.22,0,0,1,2.43,8.24h0a44,44,0,0,1,.67,5.17C92,45.92,92,47,92,48Z"/><path class="cls-5" d="M91,44.5v.12A39.53,39.53,0,1,1,51.38,5h.12c1,0,1.89,0,2.84.11a38.38,38.38,0,0,1,4.59.6,39.33,39.33,0,0,1,5.45,1.45A44.13,44.13,0,0,1,88.79,31.47a38.33,38.33,0,0,1,1.51,5.59h0a39.22,39.22,0,0,1,.6,4.64C91,42.63,91,43.57,91,44.5Z"/><path class="cls-3" d="M74.66,21.93a36.47,36.47,0,0,1,3,3.52"/><path class="cls-3" d="M58,12a38.11,38.11,0,0,1,11.78,5.76"/><path class="cls-6" d="M65,29.24,24.73,44.78c-1.64.66-1.84,2.65-.17,3.22l10.2,3.6L58.68,36.49a.45.45,0,0,1,.54.71L40.4,54.11l-1.27,10a.74.74,0,0,0,1.26.62l6-5.94,10.08,7.83A2.35,2.35,0,0,0,59.8,65.2L67,30.85A1.43,1.43,0,0,0,65,29.24Z"/></path></path></path></path></path></path></path></path></path></svg>
<span style="margin-left: 10px;"><b>Join Telegram Group</b></span>
</a>
</div>
<style>
@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: 20px; height: 20px; }
.tgf{position: fixed; top: 75%; right: 0; transform: translateY(-50%); z-index: 9999; background-color: white; border-radius: 30px; padding: 5px 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
animation:pulse 2s infinite;
border: .5px solid gray;
}
.cls-1 {
fill: #cf5915;
}
.cls-2 {
fill: #ff8721;
}
.cls-3 {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 3px;
}
.cls-4 {
fill: #1d78b5;
}
.cls-5 {
fill: #2fa8df;
}
.cls-6 {
fill: #fff;
}
.tgf a svg{width: 34px; }</style>
Last word
In this post we will provided information about Telegram floating button with pulse effect html css, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.
Dhanjee Rider
Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller,Blloger, Seo Expert, Wordpress Geek etc. Telegram
