How To Make Basic Toast Notification Alert in Blogger Free

Welcome to ThemesGadget. This post will teach How To Make Basic Toast Notification Alert in Blogger Free or Multiple Toast Notifications for personal and commercial use. Just follow our steps carefully to avoid any errors. But first, Let’s talk about it a little.

You might have seen some websites that show toast notification alerts on top of the screen when you log in. They are usually created using JavaScript(Jquery), CSS, and HTML. This article will explain creating a basic toast notification in Blogger without using any third-party plugins.

What Is Toast Notification Alert?

Toast notifications are a new way to engage with your website visitors.

In a brief time, you can capture attention and deliver a message. You can also use these alerts to notify people about a change in the status of a web page.

Toast notification alerts can be added to any website using JavaScript, CSS, and HTML.

In this tutorial, we will be creating a basic toast notification or multiple toast notifications that pop up on top of the screen when a visitor clicks a button.

Importance Of Toast Notification Alert

A toast notification is essential for two reasons. It provides basic information about an event, be it a payment confirmation, a new blog post, or a new email. Secondly, it adds a personal touch to the website by providing a first-hand experience of the website features.

Creating a basic toast notification or multiple toast notifications in Blogger is a three-step process.

What Are The Advantages of Using Toast Notification Alert?

Toast notification alerts help indicate that something has happened. For example, the website might be the first time you visit it or an error message.

The Advantages Of Using Toast Notification Alerts are:

• Toast notifications will be visible until the user decides to click on them.
• System notification will be shown only once to the user.
• The toast notification alerts are visible on all screen sizes.
• You can offer more information in a toast notification alert because of its size.
• The blog post will have a better user experience because the user does not have to scroll down to see the notification.
• You can use this technique to show blog post notifications or notifications for other blog post-related information.
• It is easy to implement this notification because of its basic requirements.

How To Make Toast Notification Alert?

To make a toast notification alert, you need some codes for it. These codes have to be added in three steps. We will add HTML code in the 1st step, CSS in the 2nd step, and javascript (Jquery) in the last step.

Step 1 - Adding HTML

INSTRUCTIONS:
- Use "toast-auto" class to force automatically notification fade out.
- Use "toast-pos-xxxxx" classes to place the 'toasts' container wherever you want.

<div align="center">
<a href="#" class="toast-trigger" data-toast="toast-name-1">Normal Toast</a> <!-- Trigger Toast. -->
<a href="#" class="toast-trigger toast-auto" data-toast="toast-name-2">Auto FadeOut Toast</a> <!-- Trigger Toast. -->
</div>

<div class="toast-container toast-pos-right toast-pos-top">
  <!-- Toast -->
  <div class="toast" id="toast-name-1">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 1!</b> Thanks For Visiting ThemesGadget Hope You Like It!
  </div>
  <!-- Toast -->
  <div class="toast" id="toast-name-2">
    <a href="#" class="close-toast">&#10006;</a>
    <b>Messege 2!</b> Thanks For Visiting ThemesGadget Hope You Like It!
  </div>
</div>

Step 2 - Adding CSS

These CSS Codes for random hex color are in Compressed format. If you want to beautify, you can use our tool by Following this Link – CSS Beautifier Tool.

<style type="text/css">
  .toast-container{width:90%;max-width:580px;margin:0 auto;}[class*="toast-pos-"]{position:absolute;padding:10px;}.toast-pos-top{top:0;}.toast-pos-right{right:0;}.toast-pos-bottom{bottom:0;}.toast-pos-left{left:0;}.toast{display:none;padding:20px;margin:20px 0;background:#eeeeee;color:#333333;}.close-toast{float:right;text-decoration:none;color:#545454;vertical-align:middle;}body{background:#fafafc;font-family:'noto sans',sans-serif;}.toast-trigger{color:#ffffff;}.toast{background:rgb(231 234 255);color:#545454;}.toast-trigger{display:inline-block;top:50%;left:50%;margin:10px;padding:15px 35px;background:transparent;color:#555eed;border:1px solid #555eed;text-decoration:none;transition:ease .2s;}.toast-trigger:hover{opacity:0.7;}
</style>

Step 3 - Adding (Jquery) JavaScript Toast Notifications

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script>
  $(".toast-trigger").click(function(e){
  e.preventDefault();
  datatoast = $(this).attr("data-toast");
  if ( $( this ).hasClass( "toast-auto" ) && !$("#" + datatoast).is(":visible") ){ 
    $("#" + datatoast).fadeIn(400).delay(2000).fadeOut(400);
  }
  else if ( !$("#" + datatoast).is(":visible") ){
    $("#" + datatoast).fadeIn(400);
  };
});

$(".close-toast").click(function(e){
  e.preventDefault();
  closetoast = $(this).parent().attr("id");
  $("#" + closetoast).fadeOut(400);
});
</script>

Conclusion

This article has explained how to create a basic toast notification alert in Blogger without using third-party plugins. A toast notification is a small message that appears on top of the screen from time to time.

You can use this toast notification as a call-to-action button to advertise your products and services. In this post, I have given a simple code that any Blogger or WordPress user can use.

In the end, I would like to say that toast notifications are a great way to generate more leads and help you establish an authoritative online presence.