The most effective method to add Dynamic Greetings involving JavaScript in Blogger

August 18, 2022 February 12, 2025

Add Dynamic Greetings involving JavaScript in your Blogger website

Hi Guys! Welcome back to PH Wizards. Today at this event our instructional exercise is The most effective method to add Dynamic Greetings involving JavaScript in Blogger

What Are Dynamic Greetings involving JavaScript in Blogger?

You might have seen sites welcoming their guests with a message that says salutation, Good evening, or pleasant night, contingent on the time they visit the site. These are basic JavaScript codes, which read the guest's gadget's time and Greet them.

Here, in this article, I'll tell you the best way to show programmed Greeting messages to your site guests.

Stars

Consequently gets the Device's time

Shows Greetings consequently concurring gadget's time

Basic and light-weight script

Dynamic shift focus over to your site

Welcomes your Website guests

Let's Begin!

The most effective method to add Dynamic Greetings involving JavaScript in Blogger

Making a Dynamic Greetings for your Blogger Website won't need a lot of information in Coding since I have previously planned it for you. What you really want to do is to execute the codes at the right spot in your Blogger Theme X

It is exceptionally easy to introduce this Dynamic greeting on your blogger website. Simply duplicate the given beneath codes and glue them perfectly located.

Stage 1: Go and login to your Blogger Dashboard

Stage 2: In Blogger Dashboard, Go to the Themes segment.

Stage 3: Now click on the drop-down icon just beside the 'Customize' button

Stage 4: Click on 'Alter HTML', presently you'll be diverted to the altering page.

Stage 5: Look for ]]></b:skin> and glue the accompanying CSS Just above it.

  
svg{width:16px;height:16px;margin-right:6px}
#greeting .greeting{font-size:14px}
.greeting{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:20px;line-height:20px;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px;box-shadow:-6px -6px 14px rgba(255,255,255,.7),-6px -6px 10px rgba(255,255,255,.5),6px 6px 8px rgba(255,255,255,.075),6px 6px 10px rgba(0,0,0,.15)}
.drK  .greeting{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}

Stage 6: Look for </body> and glue the accompanying JavaScript Just above it.

  
  <script type='text/javascript'>/*<![CDATA[*/
 function greetings() {
  var message = "";
  var time = new Date().getHours();

  if (time >= 4 && time < 12) {
    return (message = "Good Morning :)");
  } else if (time >= 12 && time < 16) {
    return (message = "Good Afternoon :)");
  } else if (time >= 16 && time < 19) {
    return (message = "Good Evening :)");
  } else {
    return (message = "Have a sweet dream :)");
  }
}

document.getElementById("greeting").innerHTML = greetings();

/*]]>*/</script>

Stage 7:Presently duplicate the underneath HTML code and glue it to any place you need to utilize it.

  
    <div class="greeting" ><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" version="1.1" viewBox="0 0 106.059 106.059"><path d="M90.546 15.518c-20.688-20.69-54.346-20.69-75.03-.005-20.688 20.685-20.686 54.345.002 75.034 20.682 20.684 54.34 20.684 75.026-.004 20.686-20.685 20.684-54.343.002-75.025zm-5.789 69.24c-17.493 17.494-45.961 17.496-63.455.002-17.498-17.497-17.495-45.966 0-63.46 17.494-17.493 45.96-17.495 63.457.002 17.494 17.494 17.492 45.963-.002 63.456zM33.299 44.364h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755c.158-.196.392-.308.645-.308s.486.111.641.304l7.697 9.757c.189.237.229.58.1.859a.822.822 0 0 1-.741.467h-3.554a.59.59 0 0 1-.463-.225l-3.68-4.664-3.681 4.664a.59.59 0 0 1-.462.225zm44.599-1.326a.84.84 0 0 1 .1.859.822.822 0 0 1-.741.467h-3.554a.588.588 0 0 1-.463-.225l-3.681-4.664-3.681 4.664a.59.59 0 0 1-.462.225h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755a.823.823 0 0 1 .645-.308c.254 0 .486.111.642.304l7.697 9.757zm-1.882 21.03c-3.843 8.887-12.843 14.629-22.927 14.629-10.301 0-19.354-5.771-23.064-14.703a3 3 0 1 1 5.54-2.3c2.776 6.686 9.655 11.004 17.523 11.004 7.69 0 14.528-4.321 17.42-11.011a2.999 2.999 0 0 1 3.944-1.563 2.999 2.999 0 0 1 1.564 3.944z"/></svg><span id="greeting"/></div>

Stage 8: That is all there is to it! Presently click on save subject

by clicking this symbol

The most effective method to add Dynamic Greetings involving JavaScript in Blogger

Duplicate all the underneath codes and glue any place you need to utilize.

  
 <div class="greeting" ><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" version="1.1" viewBox="0 0 106.059 106.059"><path d="M90.546 15.518c-20.688-20.69-54.346-20.69-75.03-.005-20.688 20.685-20.686 54.345.002 75.034 20.682 20.684 54.34 20.684 75.026-.004 20.686-20.685 20.684-54.343.002-75.025zm-5.789 69.24c-17.493 17.494-45.961 17.496-63.455.002-17.498-17.497-17.495-45.966 0-63.46 17.494-17.493 45.96-17.495 63.457.002 17.494 17.494 17.492 45.963-.002 63.456zM33.299 44.364h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755c.158-.196.392-.308.645-.308s.486.111.641.304l7.697 9.757c.189.237.229.58.1.859a.822.822 0 0 1-.741.467h-3.554a.59.59 0 0 1-.463-.225l-3.68-4.664-3.681 4.664a.59.59 0 0 1-.462.225zm44.599-1.326a.84.84 0 0 1 .1.859.822.822 0 0 1-.741.467h-3.554a.588.588 0 0 1-.463-.225l-3.681-4.664-3.681 4.664a.59.59 0 0 1-.462.225h-3.552a.822.822 0 0 1-.82-.817c0-.184.062-.363.175-.507l7.695-9.755a.823.823 0 0 1 .645-.308c.254 0 .486.111.642.304l7.697 9.757zm-1.882 21.03c-3.843 8.887-12.843 14.629-22.927 14.629-10.301 0-19.354-5.771-23.064-14.703a3 3 0 1 1 5.54-2.3c2.776 6.686 9.655 11.004 17.523 11.004 7.69 0 14.528-4.321 17.42-11.011a2.999 2.999 0 0 1 3.944-1.563 2.999 2.999 0 0 1 1.564 3.944z"/></svg><span id="greeting"/></div>

   <style>
 svg{width:16px;height:16px;margin-right:6px}
#greeting .greeting{font-size:14px}
.greeting{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:20px;line-height:20px;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px;box-shadow:-6px -6px 14px rgba(255,255,255,.7),-6px -6px 10px rgba(255,255,255,.5),6px 6px 8px rgba(255,255,255,.075),6px 6px 10px rgba(0,0,0,.15)}
.drK  .greeting{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe} 
 </style>

<script type='text/javascript'>/*<![CDATA[*/
 function greetings() {
  var message = "";
  var time = new Date().getHours();

  if (time >= 4 && time < 12) {
    return (message = "Good Morning :)");
  } else if (time >= 12 && time < 16) {
    return (message = "Good Afternoon :)");
  } else if (time >= 16 && time < 19) {
    return (message = "Good Evening :)");
  } else {
    return (message = "Have a sweet dream :)");
  }
}

document.getElementById("greeting").innerHTML = greetings();

/*]]>*/</script>