Auto Greeting with Local Time for Blogger

Today, a blogger's main goal should be to build a personal connection with their readers. When a reader enters a blog, the first thing they notice is the blog's presentation. If they are greeted in a timely manner - "Good morning!", "Good afternoon!", or "Good night!" - they will feel a positive emotion. This small effort can make your blog shine in front of readers.

Why is this feature important?

By using this technology, you can show that your blog is not only content-oriented, but also cares about the reader. Many times, readers come to read the blog at 11 pm or 6 am. Then they are happy to see an automatic "Good night!" or "Good morning!" It is a digital courtesy that helps to build a bond with the reader.

How does it work?

Uses JavaScript to calculate the time according to the device's local time. The greeting is then changed accordingly. Along with this, a smiley icon is also added, which is pleasing to the eye and easily attracts the reader.

You can easily add this beautiful feature to your blogger website. To add this feature, use the following codes in your blogger website. You need to use it inside the template, otherwise it will not work.

Greeting Box Code

<!-- Greeting Box -->
<div id='greetingBox' style='display: flex; align-items: center; justify-content: space-between; margin: inherit; padding: 10px 20px; border-radius: 10px; font-family: Arial, sans-serif; max-width: 98% ; box-shadow: 0 2px 5px rgba(0,0,0,0.1);'>
  <div style='display: flex; align-items: center;'>
    <!-- Smiley SVG Icon -->
    <svg fill='#444' height='24' style='margin-right: 8px;' width='24' xmlns='http://www.w3.org/2000/svg'>
      <circle cx='12' cy='12' fill='none' r='10' stroke='gray' stroke-width='1.5'/>
      <circle cx='9' cy='10' r='1.5'/>
      <circle cx='15' cy='10' r='1.5'/>
      <path d='M8,15 Q12,18 16,15' fill='none' stroke='gray' stroke-width='1.5'/>
    </svg>
    <span id='greetingText' style='font-size: 16px; '>Good Morning!</span>
  </div>
  <span id='currentTime' style='font-size: 14px; color: #666;'>--:--:--</span>
</div>

<!-- JavaScript -->
&lt;script&gt;
function updateGreetingAndTime() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes().toString().padStart(2, &#39;0&#39;);
  const seconds = now.getSeconds().toString().padStart(2, &#39;0&#39;);

  let greeting = &quot;Good Night!&quot;;
  if (hours &gt;= 5 &amp;&amp; hours &lt; 12) {
    greeting = &quot;Good Morning!&quot;;
  } else if (hours &gt;= 12 &amp;&amp; hours &lt; 17) {
    greeting = &quot;Good Afternoon!&quot;;
  } else if (hours &gt;= 17 &amp;&amp; hours &lt; 20) {
    greeting = &quot;Good Evening!&quot;;
  }

  document.getElementById(&#39;greetingText&#39;).textContent = greeting;
  document.getElementById(&#39;currentTime&#39;).textContent =
    now.toLocaleTimeString(&#39;en-US&#39;, { hour12: true });
}

setInterval(updateGreetingAndTime, 1000); // update every second
updateGreetingAndTime(); // run once immediately
&lt;/script&gt;

If you are using the blogger template JetTheme, you need to find the code below.

<div class='entry-text text-break mb-5' id='post-body'>

Place the HTML or codes above the code and then save.

And if you are using any of Jago-Design's themes, then find the code below!

<b:include cond='data:view.isSingleItem' data='post' name='breadcrumb'/>

Place the HTML or codes above the code and then save.

Done. Now you can visit your website to see if the codes are working.