Follow us to get updates regarding Latest posts Follow Now!

How to add Dynamic Greetings using JavaScript in Blogger

Add Dynamic Greetings using JavaScript in your Blogger site
how-to-add-dynamic-greetings-using-javascript-in-blogger-

Hello Guys! Welcome back to Techy DarshaN. Today on this occasion our tutorial is How to add Dynamic Greetings using JavaScript in Blogger.

What are Dynamic Greetings using JavaScript

You may have seen websites greeting their visitors with a message that says Good morning, Good afternoon, or Good evening, depending upon the time they visit the website. These are simple JavaScript codes, which read the visitor's device's time and Greet them.

Here, in this article, I’ll show you how to show automatic Greeting messages to your website visitors.

Pros

  1. Automatically fetches the Device's time
  2. Displays Greetings automatically according device's time
  3. Simple and light-weight script
  4. Dynamic look to your site
  5. Greets your Website visitors 

Let's Begin

Demo

How to add Dynamic Greetings using JavaScript in Blogger

Creating a Dynamic Greetings for your Blogger Website will not require much knowledge in Coding because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

It is very simple to install this Dynamic Greetings in your blogger site. Just copy the given below codes and paste them in the correct place.

Step 1: Go and login to your Blogger Dashboard

Step 2: In Blogger Dashboard, Go to Themes section

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

Step 4: Click on 'Edit HTML', now you'll be redirected to the editing page

Step 5: Search for ]]></b:skin> and paste the following 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}
  

Step 6: Search for </body> and paste the followingJavascript 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>

  

Step 7:Now copy the below HTML code and paste it wherever you want to use

  
    <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>
      
Step 9: That's it! Now click on save theme by clicking this icon

Simple way to add Dynamic Greetings in Blogger

Copy all the below codes and paste wherever you want to use

  
 <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>


Conclusion

In this article I have made a tutorial on How to add Dynamic Greetings using JavaScript in Blogger. I Hope you have liked this article and please do share with your friends and follow up 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. © Techy DarshaN | All Rights Reserved 

 ©Copyright: Techydarshan.in

Getting Info...

About the Author

Student | Developer | Blogger

تعليق واحد

  1. علي كمبيوتر
    أزال المؤلف هذا التعليق.
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.