Install Dynamic Greetings Bar On Blogger site

How to Add Dynamic Greetings Bar on Blogger Site
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Install Dynamic Greetings Bar On Blogger site
How to Add Dynamic Greetings Bar on Blogger Site

Hello Guys, Welcome to DaudBd Blog!. 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 

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.

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.

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

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}<!-- HTML Sitemap Css By Www.daudbd.Com -->
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><!-- HTML Sitemap Css By Www.daudbd.Com -->

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><!--  By Www.daudbd.Com -->

Step 8: That's it! click on this icon to save widget in theme

Conclusion

This is all about adding how to Install Dynamic Greetings Baron Blogger Website. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!

About the Author

Hey! I'm Daud, Currently Working in IT Company BD. I always like to learn something new and teach others.

Post a Comment

To avoid SPAM, all comments will be moderated before being displayed.
Don't share any personal or sensitive information.
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.