How to add stylish greetings on Blogger 2022.

Are you one of those bloggers who likes to add a little personality to your blog posts? In this tutorial, you will learn how to add stylish greetings in Blogger 2020, like Good Morning, Good Evening, Good Night, and Have a Sweet Dream on Blogger.

Stylish Greetings Script in Blogger Using JavaScript

Depending on the time of day a visitor arrives, you may have seen websites greet them with a message that says "Good morning," "Good afternoon," or "Good evening." These easy JavaScript scripts welcome visitors by reading their device's time.

In this article, I'll describe how to display greetings to website visitors automatically.

Pros:

• Automatically takes the time from the device
• Automatically displays greetings based on the device's time
• Dynamic look to your site with a simple and lightweight script
• Welcomes visitors to your website 

Demo

How to add Stylish Greetings in Blogger Using JavaScript

It won't take much coding knowledge to create stylish greetings for your Blogger website because I already designed it for you. It would be best if you correctly implemented the codes in your Blogger theme's XML.

Installing this Stylish greeting on your Blogger site is very easy. Copy the codes from below and paste them where they belong.

• Step 1: Go and login to your Blogger Dashboard
• Step 2: In Blogger Dashboard, Go to the 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: In Blogger Dashboard, Go to the Themes section

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

Finally

This article explains how to add stylish greetings to a Blogger. I hope you enjoyed this article, and if you did, please share it with your friends and keep reading this blog for more.

If you have any problems with the code or questions, feel free to ask them in the comments below.