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.
Positives
- Automatically fetches device time
- Displays the greeting automatically according to the time of the device
- Simple and lightweight text
- A dynamic look for your site
- Greeting visitors to your website
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}
</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.