Ever wanted your blog to greet visitors depending on the time of day? Well, it's actually easier than you think!
Adding a dynamic greeting that changes based on whether it’s morning, afternoon, or evening is a cool way to make your blog feel more personal and engaging.
Plus, it’s a simple touch that makes a big difference!
This dynamic greeting widget can be used on any website to make the user experience more personalized and engaging.
Whether you're running a personal blog, a business site, or a portfolio, it adds a simple yet effective touch.
For example, if you're using a Blogger site like SDavidPrince Blog, you can easily integrate this greeting to make visitors feel more welcomed based on the time of day.
The greeting could change from "Good Morning :)" to "Good Evening :)" as visitors return to your site, giving it a dynamic feel. It’s an easy way to make your site more interactive and provide a unique touch to your content.
Here’s a quick and easy way to implement it on your site:
Step 1: Get the Script
First, you'll need a small piece of JavaScript that checks the time of day and changes the greeting accordingly.
Simply add the script code before the closing </body> or </head> tag in your template
Here's the code:
<script type="text/javascript">/*<![CDATA[*/
const greetings={morning:[["Rise & Shine","\uD83C\uDF05"],["Good Morning","\uD83C\uDF04"],["Hello Sunshine","\uD83C\uDF1E"]],afternoon:[["Good Afternoon","☀️"],["Hello There","\uD83C\uDF24"],["Pleasant Day","⛅"]],evening:[["Good Evening","\uD83C\uDF06"],["Pleasant Evening","\uD83C\uDF05"],["Lovely Evening","\uD83C\uDF07"]],night:[["Sweet Dreams","\uD83C\uDF19"],["Good Night","✨"],["Sleep Well","\uD83D\uDCAB"]]};function getGreeting(){let e=new Date().getHours(),n;return(n=e>=4&&e<12?greetings.morning:e>=12&&e<16?greetings.afternoon:e>=16&&e<19?greetings.evening:greetings.night)[Math.floor(Math.random()*n.length)]}const[greeting,emoji]=getGreeting();document.querySelectorAll(".greeting-pill").forEach(e=>{e.innerHTML=`${greeting}<span>${emoji}</span>`});
/*]]>*/</script>Step 2: Add the HTML Element
Now, you need a spot on your blog where the greeting will appear.
Just add this HTML element where you want the greeting to show up (maybe near your header or in the sidebar):
<div id="greeting-pill"></div>Step 3: Save and Test
Save your changes and then visit your blog. Depending on what time of day it is, you should see a personalized greeting like “Good Morning :),” “Good Afternoon :),” or “Good Evening :)” showing up on your page!
Why It’s Great
Simple and Fun: It’s a small touch that can make your blog feel more welcoming.
Personalized Experience: Visitors feel like your site is alive and talking to them.
Easy to Implement: You don’t need any fancy coding skills to add this, just copy-paste and you’re good to go.
That's it! You've now got a dynamic greeting that changes based on the time of day. 😊
