Want to add Toast Notifications in blogger and don't know how? Don't worry i will cover this topic in my todays article.
Assalam Alaikum friends, recently I got a comment on one of my articles that how we can implement a toast notifications in blogger. Following that demand, I am compiling this article today in which I will tell you how you can implement toast notifications in blogger.
If you want a copy of my toast notification system which I have implemented on this blog then please forgive me because I don't like that toast notification and I am also going to migrate to this toast notification system in my blog.
This toast notification system is pretty awesome and looks nice then my previous toast notification system which was implemented here.
The thing that I like about this toast notification system is that we can nest the toast notifications using this toast notification script and we can also play sound at the time when the toast is becoming visible, Sounds Amazing!.
There are four styles of toast notifications which you can show to your users after implementing or adding this script into your blogger blog and that are:
Steps to implement Toast Notifications in blogger:
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Click Edit HTML
- After opening the HTML editor of your blogger dashboard press CTRL+F search for </head>.
- Now copy the code given below and paste it above </head>.
- Save Template
The functionality of making Toast Notification is added successfully now you have to write a code to create toast notification.
Make Toast Notification:Now to create toast notification you have to write something like this.
In the above line of code there are four parameters that you have to modify to create toast notification.
//Basic Usage alert(text); // Advance Usage alert(text, heading, type, hideAfter);
|text||The text which you want to show in the toast.|
|heading||Heading of the toast. Default Notification|
|type||Type of toast notification. Accepted Types [ log, success, warn, error ] & Default log|
|hideAfter||Delay after which the toast notification will be removed. Numeric Value (eg: 1000) & 1000 = 1Sec. Default 'keep', don't auto hide toast.|
Example Code & Preview:
Conclusion:So this was the article about creating and add into notification system in blogger. implement it in your blogger blog and make it looks awesome and attractive.
I hope that you will like this article and if you are having any kind of issues feel free to comment below I am here to solve all of them.