What are dynamic greetings using JavaScript? You may have seen this performance on the Mr. Meadow blog or other websites that greet their visitors with a message saying good morning, good evening, or good night, depending on the time they visit the site, which reads the actual time of the visitor's device and greets them.
Here in this article, I will show you how to add automatic welcome messages to your blog visitors on Blogger.
How to add dynamic greetings using JavaScript in Blogger
When you add the dynamic welcome message widget to your website on Blogger, it will not require you to have programming experience because this code is simple and easy and depends on actually reading the time of the visitor’s device. Just follow the below steps carefully copy the codes given below and paste them in the right place.
Steps to install the tool
- Step 1:- Log in to the Blogger control panel.
- Step 2:- Go to “ Edit HTML ”.
- Step 3:- Find and paste the following CSS ]]></b:skin> code over 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 4:- Find and paste the following Javascript </body> code right 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 evening :)");
} else if (time >= 16 && time < 19) {
return (message = "Goodnight :)");
} else {
return (message = "sweet dreams :)");
}
}
document.getElementById("greeting").innerHTML = greetings();
/*]]>*/</script>- Step 5: Now copy the HTML code below and paste it wherever you want, because the following code is responsible for displaying the content of the widget.
<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>Telegram
CONCLUSION
In this article, I shared with you How to add Dynamic Greetings using JavaScript in Blogger. I hope you have liked It. Please do share it with your friends and follow our blog for more.
If you face any problems in Demo, Download or have any questions so feel free to ask me in comments section or join our Telegram Channel to get the lastest posts updates daily.
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.
©Copyright: Jirale.com™