hi everyone welcome to keytube blogging and in this video I
will show you how you can add a toast pop-up notification to your blogger
website so as you can see that I have added a post notification like this and
here I have added a telegram icon I have added a paragraph of text and I have
added a call to action button so in this way you can add a toast notification
pop-up to your blogger website and you can change the tags you can change the
SVG icon used here here you can change it to Whatsapp or any other icon here
and you can change the call to action button text and you can change the link
as well
Toast pop-up notification
and once the user click on the join now button or click on the close
button it will disappear for the next 30 days and it will not show again for
the next 30 days to that users unless he cleared the cookies from the browser
so let’s check how we can add this to your blogger website so let me just close
it here and let me just you how you can add that so for this you need to go to
your blogger dashboard and here
click on the theme section here now here you
need to take a backup of your theme past before making changes and let’s click
on edit HTML now you can scroll down all the way to the bottom and search for
the closing body tag so I will paste the code just before the closing body tag
so let me just copy the code from here and I will paste it the code here like this
and here you can change the links and text as well so as you can see that this
is the paragraph text here so you can change the paragraph here and here you
can change the call to action link here and you can change the text in the
button here as well and here you can change the icon here I have used a
telegram icon so you can change your icon here as well and you can adjust the
property of this buttons so you can change the background color of the
container from here like this so you can change this hex code to change the
background of your pop-up and you can adjust all the properties from here and
here you can see that we have set 30 days here in the
JavaScript so it will not show
JavaScript so it will not
show again and once the user click on the close button or the join button so
let me just show you how it works so let me just click on Save here so as you
can see that there is an error here in this line 4825 so let’s scroll up here
and here it is 4825 and I think we need to add ampersion symbol here amp semicolon
I think it will solve this shoe let’s click on Save again all right now it’s
saved
so let’s go to the front end and let me just refresh this page and as you can
see that it is not showing because I have already implemented it so let me just
clear the cookies for this website and let’s reload this page and let’s wait
for the one second and as you can see that it has opened with a animation from
the bottom and when I click on this one now button it will redirect me to the
telegram so you can
Blogger conditional tag
add link to any of the website and once you click on the
button it will not show up again so as you can see that I have opened different
pages but it is not showing so if you want to sew it again then you have to
clear your cookies or wait for 30 days so let’s clear the cookies once again and
let me just reload this page and as you can see that it is now again showing in
this page and if you want to specifically load this script to a home page or
post page then you have to use the Blogger conditional tag in your theme code
so I have already made a video on how to use the Blogger conditional tag to
load the script on
particular pages so what I can do is I will go to tacky live
and I will search for blogger conditional tag and here it is I will click on
here and suppose I want to load it only on the home page then how I can do that
so I can simply copy the Eep condition here like this and I will go to the
theme click on edit HTML and I will scroll down all the way to the bottom and I
will find the starting of this code so I will add the if condition here and I
will close the if condition at the end so I will copy it and I will close the
if
condition here like this now let me just click on Save here okay now the
code is saved let me just go to the Post page and let me just refresh this page
as 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 will start
showing the code like this so in this way you can restrict the code to load on
particular pages so you can watch this video on how to use the Blogger
conditional tag I hope you have understand how to add the pop-up notification
like this to your blogger website and you can easily change different property
here as well
Particular pages
so if you click on here you can see that you can change the color
of the text like this 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 like
blue and let’s change the color to white like this and you can also change the
container background as well so let’s change it to something like this or let’s
change it to something like black 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 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 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 is
increase the background of this icon so let’s increase the icon size as well so
I will click on here click on SBG and let’s increase the width to something
like 54 pixel let’s keep it 56 and let’s reduce the padding a little bit like
this so in this way you can further adjust the icon as well so make sure to
tweak the CSS code to achieve the styling according to your brand and
according
to your brand color as well so I hope this video helps you add a pop-up
notification to your blogger website and if you have any doubt regarding this
then you can ask me in the comment section and you 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 the like button and if you are new to
this channel consider subscribing I will see you in the next one bye bye
