|
| 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 -->
</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!