Adding Dynamic Greetings to Blogger
Today, we'll explore a tutorial that delves into the incorporation of Dynamic Greetings using JavaScript specifically tailored for Blogger platforms.
Dynamic Greetings via JavaScript encompass a technique often observed on websites, where visitors are welcomed with personalized messages such as "Good morning," "Good afternoon," or "Good evening," contingent upon the time they access the site. These implementations are achieved through straightforward JavaScript code that retrieves the time from the visitor's device, enabling tailored greetings.
Within this article, I aim to demonstrate the process of seamlessly integrating automatic greeting messages onto your website, enhancing its appeal and user engagement.
Advantages of this implementation include the automated retrieval of the visitor's device time, enabling the automatic display of personalized greetings according to their local time. Additionally, the script is designed to be lightweight and straightforward, adding a dynamic flair to your website while creating a welcoming atmosphere for your site's visitors.
To infuse your Blogger website with Dynamic Greetings through JavaScript, you don't need an extensive coding background—I've streamlined the process for you. Implementing this feature involves integrating specific code segments into your Blogger Theme XML.
Here's a straightforward guide to effortlessly install Dynamic Greetings on your Blogger site:
Step-by-Step Installation Guide:
Step 1: Log in to your Blogger Dashboard.
Step 2: Navigate to the Themes section.
Step 3: Locate and click on the dropdown icon positioned next to the 'Customize' button.
Step 4: Choose 'Edit HTML,' redirecting you to the editing interface.
Step 5: Use the search function to find ]]></b:skin> within the HTML code. Insert the following
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}By following these steps, you'll seamlessly integrate the Dynamic Greetings functionality into your Blogger site, enhancing its interactivity and engaging your visitors with personalized welcomes based on their local time. This streamlined approach ensures a hassle-free implementation, requiring only a few simple steps to create a more dynamic and welcoming browsing experience for your audience.
Step 6: In step 6, you'll want to locate the </body> tag in your Blogger theme's HTML code. Then, take the JavaScript provided and insert it just above this </body> tag.
<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>In the next step (Step 7), simply copy the HTML code provided and paste it into the desired location on your Blogger site where you wish to display the dynamic greetings.
<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>
Replace the text with codes
Start write the next paragraph here
That's it. Enjoy :)