Up next in 10
Animated Floating Telegram Button in Blogger & WordPress ⚡
242 views
Jan 24, 2024
This video tutorial showcases the implementation of an animated floating Telegram button for both Blogger and WordPress websites. Released in 2023, the content provides step-by-step instructions on how to add this dynamic feature, ensuring that the Telegram button remains visually appealing and accessible as users navigate through the website. Whether you're a blogger, content creator, or website owner looking to enhance communication with your audience through Telegram, this tutorial promises to guide you in seamlessly integrating the animated floating button into your platform. Elevate the user experience on your Blogger or WordPress site by incorporating this engaging and functional feature for easy access to your Telegram channel or group.
View Video Transcript
0:00
Hello everyone, welcome to Key to Blogging and in this video I will show you how you can
0:03
add a floating telegram button like this in your blogger and WordPress website
0:08
So as you can see that this telegram floating button is showing at the bottom right hand
0:13
corner and if I scroll down the page this element is sticky
0:17
And if you click on this button it will redirect to the Telegram page or you can redirect it
0:22
to your Telegram profile URL. So let's check how you can implement it in both blogger and WordPress website
0:29
So let me just show you how you can implement it in Blogger first
0:33
So for this, let's go to the Blogger dashboard here and you can directly paste the code
0:38
in an individual page or post or you can directly add it to your theme code
0:44
So let's click on theme here and here make sure to take a backup fast before changing anything
0:50
Now let's click on the Edit HTML here and here you need to scroll down all the way to
0:54
the bottom and search for the last two lines. And here you will see this option closing body tag or you might be some different coding
1:05
in the closing body tag so you need to find the last two lines
1:09
And you have to add the code just before it. So let me just paste a code like this
1:15
So this is the actual code of this floating telegram button. So this is the HTML code and this is the CSS code
1:24
So here you need to change one thing. you need to add the telegram general URL
1:30
So you can replace it with your own telegram link and then you can copy this link here and you can paste it just above the closing body tag and you can also paste the CSS just below it so let me just copy the CSS
1:46
code from here and I will paste it just below it and you can also copy the CSS code only in the
1:54
CSS section if you don't want to add the CSS code in the footer section or in the closing body
2:01
tag. So you can just cut this option here and you can remove the style tag from here and I can
2:08
simply search for the CSS section of this theme. And here it is. This is the closing B-skin
2:15
tag. So I can paste the CSS code directly here. And here I don't have to add the style tag
2:23
So let me just click on save here. And this is the website and it will show in this
2:31
this website so let's wait for some time. All right, let's refresh this page and as you can see that the telegram floating button
2:41
is showing here and if I open a page it will still show in that page
2:46
So if you click on this link it will redirect to your telegram link and you can implement
2:53
the same telegram button in your WordPress website. So let me just show you
2:58
So here this is the WordPress dashboard and we'll just show you. we are going to implement the Telegram button in this website
3:04
So for this you can either use a code manager plugin or you can directly paste it just above the closing body tag So you can just go to the appearance here and click on the theme file editor And here you will see this option theme footer or footer
3:20
Just click on here and here you will see this option closing body tag as before as we
3:28
is seen in the blogger. So let me just copy the whole code from here and I can paste it just above the closing body tag
3:39
So let's click on update here. All right, let's go to the front end and let's refresh this page
3:47
And as you can see that, the floating button is showing in our WordPress website
3:52
And you can also use the same code using a code manager plugin
3:55
If you don't want to change the original theme code, then you don't have to paste it here
4:01
You can use a code manager plugin. So I will go to plugin and I will click on Add New
4:07
And I can simply search for code manager. And here you can use this fast plugin, WP code, or you can use header, footer code manager
4:18
So there are various plugins available. So I will use this one here
4:24
And I will activate this plugin. Now I will click on the code snippet option here
4:31
And here you will see this option header and footer. Just click on here
4:35
And here you can place the same code in the code. your footer section. Now let's click on save changes here. Now let's refresh this page
4:45
And as you can see it is still working So this is how you can implement it in blogger and WordPress website And you can further customize this look and fill up this button So if you right click on here and as you can see that you can change the SBG color from here
5:01
So by default it is added the white color. So you can change the SBG color a little bit here
5:08
And here you can select the deep class here and here you can change the background color
5:13
So if you don't want this color, then you can change the color. you can change it with a different color from here like this
5:20
And you can also replace the telegram icon with a WhatsApp icon if you want
5:25
So let me just show you. So here you can change the color like teal like this
5:31
This is just like a WhatsApp icon here and here you can change the SBG code
5:37
So you can get different SBG code in our website. So let me just copy the WhatsApp code from here
5:44
I will change the SBG code of telegram. So I will click on here and I will remove all code and paste the SBG code of WhatsApp
5:53
And as you can see that the WhatsApp button is added in this telegram section
5:59
So you can easily modify this button and you can use different icons like call button
6:03
WhatsApp button or Telegram button like that. And you can change the color of this icon
6:09
So this is how you can add a floating telegram button to your blogger and WordPress website
6:14
And if you have any doubt regarding this, then you can ask me in the comment section
6:19
And if you found this video helpful and want me to make more videos like this
6:23
then make sure to hit the like button. So I will see you in the next video
6:26
Thank you
#Blogging Resources & Services