Welcome to the blog post on "How to Add Dynamic Greetings using JavaScript in Blogger." If you want to make your Blogger website more interactive and personalized, adding dynamic greetings is a great way to achieve that. With dynamic greetings, you can greet your visitors with a customized message based on factors like the time of day, user location, or any other criteria you choose.
In this guide, we will explore how JavaScript can be used to add dynamic greetings to your Blogger website. JavaScript is a powerful scripting language that allows you to manipulate website elements and create dynamic functionality. By leveraging JavaScript, you can create a personalized and engaging experience for your visitors.Whether you want to greet your users with a "Good morning," "Good afternoon," or "Good evening" message, or you want to display a unique greeting based on their geographic location, this tutorial will provide step-by-step instructions to help you implement dynamic greetings on your Blogger site.
Let's dive in and learn how to add dynamic greetings bar in Blogger using JavaScript!
How to add Dynamic Greetings Bar in Blogger Using JavaScript
Step 2: In Blogger Dashboard, Go to Themes section
Step 3: Now click on the drop down icon just beside the 'Customize' button
Related Posts
Step 4: Click on 'Edit HTML', now you'll be redirected to the editing page
Step 5: Search for ]]></b:skin> and paste the following CSS Just 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: Search for </body> and paste the following Javascript Just 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 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:Now copy the below HTML code and paste it wherever you want to use
<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 9: That's it! Now click on save theme by clicking this icon
Customize Your Blogger Blog with Dynamic Greetings Using JavaScript
To use this awesome and dynamic greetings on your blog ensure you copy all the code given below and paste it anywhere in your blogger layout depending on where you want it to be display.
<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>
<style>
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}
</style>
<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>
Conclusion
In conclusion, adding dynamic greetings to your Blogger website can greatly enhance the user experience and provide numerous benefits. By personalizing greetings based on user criteria, you can create a more engaging and tailored experience, leading to increased user engagement and reduced bounce rates. Customized greetings also contribute to a positive brand image, improving user retention and loyalty.
Additionally, dynamic greetings can positively impact conversion rates by capturing users' interest and guiding them towards desired actions. The flexibility and adaptability of dynamic greetings allow you to stay relevant and competitive in a constantly evolving digital landscape. By leveraging the power of JavaScript and implementing dynamic greetings, you can elevate your Blogger website and create a memorable and impactful online presence.
