How To Add an Offers And Notice Alert Bar In WordPress Website

Add An Offers and Alert bar is a very handy way to grab your customer’s attention or converting your users into subscribers. 

This Alert message can for upcoming sales, changing in your website services, or about any event on your website or company. 

This type of Offers or an Alert bar is a very dynamic way to grab the attention of your coming customers or users much better to just putting a dull banner or text announcement at your homepage. 

Demo Of How To Add an Offers And Notice Alert Bar

For a better practical understanding of how to implement this feature on your website properly, I recommend you to please watch the video below. 

Step by Step Guide How To Add an Offers And Notice Alert Bar In WordPress

Follow the below steps properly to Notice Alert Bar Properly in your WordPress Website properly. 

  • First Go to your WordPress Dashboard
  • Now go to Appearance >> Customize

WordPress-Dashboard

  • Now Click on Custome CSS/JS or Additional CSS

Custome-CSS-In-WordPress

Now Copy the below CSS Code and paste into it. 

.discountbar { 
    background-color: #FF4500; 
    color: #FFFFFF; 
    font-weight: 900;
    font-family: Arial;
    display: block; 
    line-height: 45px;
    height: 50px; 
    position: relative; 
    text-align: center; 
    text-decoration: none; 
    top: 0px; 
    width: 100%;
    z-index: 100;
}

 

Paste the above code and then press publish just like in the image below.

How-to-add-Additional-CSS-in-WordPress

Now its time to add HTML and JavaScript code for as a final step. For doing this the easiest way is to install a very easy to use WordPress plugin named as  Insert Headers and Footers

After installing and activating the plugin rest of the process is really simple just follow the steps below. 

  • Go to your WordPress Dashboard and then Settings » Insert Headers and Footers.
  • Now click on the plugin option to open it. 

How-To-Add-Custom-HTML-Code-in-WordPress

Now copy the below HTML code and paste it into the plugins Script in Body’s field.  

<div class="discountbar"> AVAIL UPTO 75% OFF | GRAB IT NOW | ENDS IN  <span id="igtm"></span><div>

 

Paste the above code into the plugins Body field as shown below.

How-to-add-HTML-code-in-wordpress-website

Now if you want to change anything in the text you can do this by simply altering the text written as AVAIL UPTO 75% OFF

Now its time to add some interactivity in your Alert Toolbar by adding an Expiring Time shows when the offer will expire. 

It is very similar to the above step just follow the steps below.

First copy the below JavaScript code and paste it into the Plugins Scripts in Footers field. 

<script>
// Set the date we're counting down to
var countDownDate = new Date("Aug 5, 2020 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="igtm"
  document.getElementById("igtm").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
    
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("igtm").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

Now paste the code as shown in the image below. 

Now you should visit your website and you will see a beautiful Toolbar at the top of your website. 

Jack Sparrow

Hay I Am Admin Of This Website. I Am Very Passionate About Computers And Technology. This Website Is The Result Of My Passion. I Love To Eliminate The Barriers That Come In Seeking Education. This Website Is The Free Source Of Learning About New Technology And Up To Date Knowledge.

Leave a Reply