What tutorial do you want for the next article! Request Here!

How to Add Dynamic Greetings Bar on Website

Learn how to add dynamic greetings bar on website with our step-by-step guide. Enhance user experience and engagement. Implement greetings now!
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Learn how to add dynamic greetings bar on website with our step-by-step guide. Enhance user experience and engagement. Implement greetings now!

How to Add Dynamic Greetings Bar on Website

Hello Guys, Welcome to The Web Trick. Today's article is about "How to Add Dynamic Greetings Bar on Website" template. So follow the some easy steps to add attractive, stylish greeting bar in Blogger & WordPress.

Why Greeting Bar is Important?

Greeting Bar is the structure of our blog pages and posts. The sitemap page will also improve the user experience. When we add a sitemap page to our blogger then the users can easily find the post they want to find. And most importantly, when the (Google,Yahoo) Webmaster Tools tools crawler come to our website then the crawl is easily done.

What are dynamic greetings using JavaScript

You may have seen websites greet their visitors with a message that says Good morning, Good evening, or Good evening ، depending on the time they visit the site. These are codes JavaScript simple ، which reads the visitor's device time and revives them.

Here ، In this article ، I'll show you how to show automatic welcome messages to your website visitors.

Positives

  1. Automatically fetches device time
  2. Displays the greeting automatically according to the time of the device
  3. Simple and lightweight text
  4. A dynamic look for your site
  5. Greeting visitors to your website 
Let's get started

How to add dynamic greetings using JavaScript in Blogger

Won't Creating dynamic greetings for your Blogger website requires a lot of coding knowledge because I have already designed it for you. What you need to do is to execute the codes in the appropriate place in your Blogger Theme XML file.

For the demo you can see through the button below


How to Install Dynamic Greetings Bar

It's very easy to install these dynamic greetings in your blogger site your. Just copy and paste the codes given below in the right place.

Step 1: Go and login to the Blogger

Step 2: In Blogger Dashboard ، Go to Themes section

Step 3: Now click on the Next to the Customize button

Step 4: Click on Edit HTML ، Now you will be redirected to the editing page

Step 5: Search for ]]></b:skin> next and paste directly 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: Find Javascript </body>
and paste it directly on top of 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: Copy the below HTML code and paste it wherever you want to add.

<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! click on this icon to save widget in theme

Conclusion

You ought to indeed note by thinking in the remark box underneath. Or on the other hand you moreover bear to give some sort of Suggestion, likewise you can partake your conviction with me in the Comment Box beneath.

I didn't give this content to any individual who saw or replicated them. This content I've looked through a great deal and given by experience. So kindly don't note on this substance.

Assuming you experience any issues while copying this script you can impart me by Contact and I'll attempt to help.

You May Like These Posts:

Post a Comment

To avoid SPAM comments, all comments will be moderated before being displayed.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.