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
