Up next in 10
How to Add a Toast Notification Popup in Blogger Website
10K views
Jan 23, 2024
Enhance user experience on your Blogger website with this tutorial on adding a toast notification popup. Whether you're a blogger, content creator, or website owner, this video provides step-by-step instructions on implementing a toast notification feature. Dive into the customization process and learn how to create informative and visually appealing popups that grab your visitors' attention. Tune in to discover how to add this dynamic element to your Blogger website and keep your audience informed and engaged. ЁЯМРЁЯФФтЬи
View Video Transcript
0:00
Hi everyone, welcome to KeyTube blogging and in this video, I will show you how you can
0:04
add a Toast pop-up notification to your blogger website. So as you can see that I have added a Toast notification like this and here I have added
0:13
a telegram icon, I have added a paragraph of text and I have added a call to action button
0:19
So, in this way, you can add a Toast notification pop-up to your blogger website and you can
0:26
change the text, you can change the SVG icon used here, here you can change it to WhatsApp
0:32
or any other icon here and you can change the call to action button text and you can
0:36
change the link as well. And once the user click on the join now button or click on the close button, it will disappear
0:44
for the next 30 days and it will not show again for the next 30 days to that users unless
0:50
he cleared the cookies from the browser. So let's check how you can add this to your blogger website
0:56
So let me just close it here and let me just show you how you can add that
1:01
So for this, you need to go to your blogger dashboard and here click on the theme section here
1:08
Now here you need to take a backup of your theme past before making changes and let's
1:14
click on edit HTML. Now you can scroll down all the way to the bottom and search for the closing body tag
1:23
So I will paste the code just before the closing body tag
1:28
So let me just copy the code from here and I will paste the code here like this and here
1:37
you can change the links and text as well. So as you can see that this is the paragraph text here
1:42
So you can change the paragraph here and here you can change the call to action link
1:47
here and you can change the text in the button here as well
1:53
And here you can change the icon here I have used a telegram icon so you can change your
1:58
icon here as well and you can adjust the property of this button
2:03
So you can change the background color of the container from here like this
2:07
So you can change this hex code to change the background of your pop-up and you can
2:14
adjust all the properties from here and here you can see that we have set 30 days here
2:20
in the JavaScript. So it will not show again once the user click on the close button or the join button
2:28
So let me just show you how it works. So let me just click on save here
2:33
So as you can see that there is an error here in this line 4825
2:39
So let's scroll up here and here it is 4825. I think we need to add a ampersand symbol here AMP semicolon
2:49
I think it will solve the issue. Let's click on save again
2:53
All right now it's saved. So let's go to the front end and let me just refresh this page
3:00
And as you can see that it is not showing because I have already implemented it
3:04
So let me just clear the cookies for this website and let's reload this page and let's
3:12
wait for the one second and as you can see that it has opened with a animation from the
3:18
bottom and when I click on the join now button it will redirect me to the telegram
3:24
So you can add link to any of the website and once you click on the button it will not
3:30
show up again. So as you can see that I have opened different pages but it is not showing
3:37
So if you want to show it again then you have to clear your cookies or wait for 30 days
3:44
So let's clear the cookies once again and let me just reload this page and as you can
3:50
see that it is now again showing in this page and if you want to specifically load this
3:56
script to a home page or post page then you have to use the blogger conditional tag in
4:01
your theme code. So I have already made a video on how to use the blogger conditional tag to load the script
4:08
on particular pages. So what I can do is I will go to Taggilyph and I will search for blogger conditional
4:17
tag and here it is I will click on here and suppose I want to load it only on the home
4:25
page then how I can do that. So I can simply copy the if condition here like this and I will go to the theme click
4:35
on edit html and I will scroll down all the way to the bottom and I will find the starting
4:41
of this code. So I will add the if condition here and I will close the if condition at the end
4:50
So I will copy it and I will close the if condition here like this
4:56
Now let me just click on save here. Now the code is saved let me just go to the post page and let me just refresh this page
5:06
and you can see that it is now gone from the post page. So if I open any of the post it will not show up again but when I go to the home page it
5:15
will start showing the code like this. So in this way you can restrict the code to load on particular pages
5:23
So you can watch this video on how to use the blogger conditional tag
5:27
I hope you have understand how to add the pop-up notification like this to your blogger
5:32
website and you can easily change different property here as well. So if you click on here you can see that you can change the color of the text like this
5:44
and you can change the button as well. So let's click on here click on the button and let's change the button color to something
5:51
like blue and let's change the color to white like this and you can also change the container
5:58
background as well. So let's change it to something like this or let's change it to something like black
6:07
and you can also change the icon here as well. So let's click on icon and you can change the background color of the icon like this
6:16
So you have full control over this. So let's click on here and you can also change the padding as well if you want
6:25
So you can increase the icon size as well. So as you can see that I have increased the padding to 33 pixel and it's increased the
6:35
background of this icon. So let's increase the icon size as well
6:40
So I will click on here click on sbg and let's increase the width to something like 54 pixel
6:47
and let's keep it 56 and let's reduce the padding a little bit like this
6:57
So in this way you can further adjust the icon as well
7:01
So make sure to tweak the CSS code to achieve the styling according to your brand and according
7:07
to your brand color as well. So I hope this video helps you add a pop-up notification to your blogger website and if
7:15
you have any doubt regarding this, then you can ask me in the comment section and you
7:18
will get the download link of this code in the description. So feel free to check it out and if you found this video helpful, then make sure to hit
7:27
the like button and if you are new to this channel, consider subscribing
7:31
I will see you in the next one. Bye bye
#Blogging Resources & Services