How to make Toast Notification like Plus ui

Hello, Bloggers! Welcome to Raghavendra Technic.

In this tutorial, we are going to show you How to make Toast Notification.

Toast notifications are a type of notification that appear briefly on the screen, typically in the form of a small rectangle or a rounded rectangle with a brief message. They are used to provide users with timely and relevant information or alerts without interrupting their current activity. Toast notifications are commonly used in various software applications, including mobile apps and desktop operating systems.

When a toast notification appears, it typically appears as a small rectangular or rounded rectangle box that pops up on the screen momentarily and then disappears after a short period of time. The notification usually contains a concise message or piece of information that is relevant to the user.

The appearance of a toast notification can vary depending on the platform and application. It typically includes a short text message along with an optional icon or image. The position of the notification on the screen is usually in the corner or at the top or bottom of the screen, allowing it to be easily noticed without obstructing the user's view.

Overall, toast notifications provide a convenient way to deliver important information to users in a concise and unobtrusive manner, ensuring that users stay informed without disrupting their workflow.

Here are some key aspects of toast notifications:

1. Appearance: Toast notifications are usually displayed in a non-intrusive manner. They are typically positioned in the corner of the screen, allowing users to easily view them without blocking their current tasks. The appearance may vary depending on the platform, but they often include a short text message and sometimes an icon.
2. Duration: Toast notifications are designed to be temporary and automatically disappear after a short period. The duration can vary, but it is typically a few seconds. This ensures that the notification doesn't linger on the screen and interrupt the user's workflow.
3. Purpose: Toast notifications are used to deliver important but non-critical information to users. They can be used for various purposes, such as displaying new message alerts, system updates, calendar reminders, app notifications, or any other event that requires the user's attention.
4. Interaction: In most cases, toast notifications are not interactive by default. However, they may include basic interactions such as tapping or clicking to open the associated application or dismiss the notification. Depending on the platform and application, additional actions or buttons may be provided within the notification itself.
5. Customization: Developers often have some degree of control over the appearance and behavior of toast notifications. They can customize the message, icon, duration, position, and other aspects to align with the application's branding and user experience.
6. Platform-specific implementations: Toast notifications may differ in their implementation across various platforms. For example, on Windows, the Windows Notification Platform (WNS) is used to display toast notifications, while on Android, the Android Notification Manager handles the display. Each platform provides its own set of APIs and guidelines for developers to create toast notifications that comply with the platform's design standards.

Before starting codes see once Demo

How to make Toast Notification?

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

/* Animation(s) */ @keyframes slidein{0%{opacity:0}10{opacity:1;bottom:24px}50{opacity:1;bottom:24px}90%{opacity:1;bottom:24px}100%{opacity:0;bottom:-70px;visibility:hidden}} @-webkit-keyframes slidein{0%{opacity:0}10{opacity:1;bottom:24px}50{opacity:1;bottom:24px}90%{opacity:1;bottom:24px}100%{opacity:0;bottom:-70px;visibility:hidden}}

Important!
please change || font-family: var(--fontB); || codes

Step 6: Now search the code <body> and paste the following Codes just below to it.

<!--[ Toast Notification ]-->
<div class='tNtf alt notranslate' id='toastNotif'/>

Step 7: Now search the code </body> and paste the following Codes just above to it.

/* toastNotif */ function toastNotif(e){var tNotif = qSel('#toastNotif'); if (tNotif != null){tNotif.innerHTML = '' + e + ''}};

Step 8: Now click on Save by clicking this icon

Step 9: That's done!

Step 10: How to add in Posts or Pages. Follow my Instructions

Create a new Post or Page or Select Existing Post or Page copy the Below HTML and JAVASCRIPT codes and Paste Post or Page

Using by onclick code

<div onclick="exampleToast()">Use me for Toast Notification</div>

<script>/*<![CDATA[[*/
 /* Toast Notification */ function exampleToast() {document.querySelector("#toastNotif").innerHTML="<span>Oops, This script Not For Free! but you got free. on Raghavendra Technic (mR) Blog.</span>"};
/*]]>*/</script>

Step 11: How to use two Functions on onclick. Follow my Instructions

onclick="exampleToast();yourFunction()"

---

Credit

Created by : Plus Ui.

Conclusion

In this article I have made a tutorial on How to make Toast Notification. I hope you have liked it and Please do share with your friends and follow our blog for more

If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved

© Copyright:
raghavendratechnic.blogspot.com

Go to Link