Our toast notification and it also has a delay of one second so this toast notification is displayed one second after the page load now you can go ahead and customize the delay to whatever you.
Want and if i click on this close button or on this link over here we can see that the torch notification goes away and now if you refresh this page the toast notification is not being.
Displayed so it is displayed only once so let's get started all right this is our blogger website where we're gonna add the toast.
Notification so let's go to the dashboard and let's go to theme and i'm using this theme called contempo lite which comes by default with blogger so let's go over here to this arrow and.
Click on edit html and here we need to add the html the css and the javascript so let's go to the source code and i will leave the link of the source.
And i just pasted the link over here inside the head section now in this line of code we have to change the amp percent to ampersand amp semicolon and now let's add the html so.
Let's scroll down and go to the end of the theme code and here just before the body ends i'll just paste the code so let's go back to our source code and.
Let's copy the html inside the body so i'll just copy everything from here till here and i'll just paste it over here now we need to update the links of these.
Images over here because we don't have this folder called images or this image called cover.png in our blogger website so we have to upload this image somewhere and get the link and paste it.
Over here we have to do the same over here for this image as well we will do that later but before that let's go ahead and add the javascript so i'll just create a script tag over here.
And let's go back to our source code and Wesdigital
Let's go to the main.js file and i'll just copy everything from here and i'll just paste it over here all right now the last thing we need to add.Is the css so let's go back and let's go to the style.css file and i'll just copy everything from here and let's go back and let's scroll up and let's go to the css.
And here we can see this is the css of the theme let's go to the end of the css and here i'll just make a comment i'll just type toast notification and here i'll just paste the css right.
Now let's go ahead and save this right now let's upload the image into a page and let's get the link and add it to our theme code so let's go to pages and let's.
Create a new page and let's click on insert image and go to upload from computer and let's click on choose files and here are the two images so let's select both of these and.
Click on open and let's select both of these images from here and let's click on select and here we will select original size and click on ok.
Now here we have the two images now let's add the link of these images to our theme code so i'll just open the theme code in a new tab so i'll just right click over here and click on open.
Link in new tab and now let's click on theme and let's go over here to this arrow and click on edit html and now let's scroll down and go to the html that we just added and here we need to.
Replace the links of these images so first of all here we can see we have the cover image so let's go back and just right click over here and click on copy image address.
And let's go back and here i'll just
Paste the link and we'll do the same for the close image so let's go back and right click over here and click on.Copy image address and go back over here and paste it right here right now this should work so let's click on save.
And let's go back to our website and let's refresh this page and here we can see that the toast notification is displayed over here but it is below these posts.
So if you scroll down we can see this is the touch notification so we have to bring it above all these posts so let's right click over here and click on inspect.
And let's select the toast container and here we will just add a z index and let's see whether it works so let's type z index.
And we'll just set it to let's say 200 so now we can see it is above all the other elements so we need to add a z index of 200 to the toast container now the next thing.
We need to fix is the color of this text so if you go back to the design here we can see we have this white color for the text so let's go back and let's right click.
Over here and click on inspect and let's select the s3 and here we can see in the theme it already has this color set for the s3 so we have to change the color of the s3.
Inside the toast container so we have to add a color of white over here so let's go back and let's make those changes so let's go back to our template code and let's go to the css.
And the first thing we need to do is add a z index so let's type z index and we'll just set it to 200 and let's go to the s3 and we'll change the color of the text to white.
And now it should work by the way you can go ahead and make changes in the html and the javascript so if you go back to the html here we can see this is the text so you can go.
Ahead and add any text you want over here and you can also add the link of any page you want over here inside the href and if you want to change the delay of the toast notification you can change.
It over here here we can see we have 1000 written over here it means one second so you can go ahead and change this to whatever you want and i have already created a video on designing.
This toast notification from scratch using html css and javascript so if you have any doubts in this you can go ahead and watch that video i will leave the link in the description right now let's.
Click on save and now let's go back and let's refresh this page and here we can see we have this toast notification displayed over here at the.
Bottom and we can see after one second this touch notification is displayed and now if i click on the close button we can see that it goes back and now if you refresh this page.
The touch notification is not being displayed anymore so that's basically how you add a touch notification to your blogger website and i will leave the link of the source code and also the.
Design video in the description of this video so that's it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button.
And subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day .