Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
 |
| © Itz TxS Dynamic Greetings |
Hello guys! Welcome back to Itz-TxS. Today on this occasion ، Our tutorial is how to add dynamic greetings using JavaScript In Blogger.
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.
Here ، In this article ، I'll show you how to show automatic welcome messages to your website visitors.
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
Let's get started
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.
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
next and paste directly above itً
]]></b:skin>next and paste directly above itً
. greetings span {margin-top: -3px;}
. greeting svg{margin-left< /span>: 11px}
svg{width:16px;height:16px}
#greeting .greeting{font-size:14px}
.greeting{display:inline-flex;align-items:center;margin:10px 0;padding:12px 15px;outline:0;border:0;border-radius:100px;line-height:20px;font-size:14px;white-space:nowrap;overflow:hidden;max-width:320px;border: 1px solid #e6e6e6;background: var(--fotB);}
.drK .greeting{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe< /span>;background: var(--darkBs);}</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 = "Sweet Dreams ");
}
}
document.getElementById("greeting").innerHTML = greetings();
/*]]>*/</script>Step 7: Now copy the HTML code below and paste it wherever you want
<center>
<div class="greeting" ><svg class="svg-icon" style="width: 20px; height: 20px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512.00181 52.094733c253.591659 0 459.903457 206.311797 459.903457 459.903457S765.593469 971.905267 512.00181 971.905267 52.098354 765.593469 52.098354 511.99819 258.410151 52.094733 512.00181 52.094733M512.00181 0c-282.770502 0-512.00181 229.231308-512.00181 512.00181S229.231308 1024 512.00181 1024s512.00181-229.231308 512.00181-512.00181S794.772313 0 512.00181 0L512.00181 0zM360.597645 414.049955m-67.288729 0a18.587 18.587 0 1 0 134.577458 0 18.587 18.587 0 1 0-134.577458 0ZM663.405975 414.049955m-67.288729 0a18.587 18.587 0 1 0 134.577458 0 18.587 18.587 0 1 0-134.577458 0ZM693.113368 631.142719c4.742467 0 9.539237 1.285172 13.8509 4.007566 12.171125 7.656731 15.834772 23.734056 8.16356 35.916042-44.427142 70.615696-120.712077 112.77659-204.05641 112.77659-81.755064 0-157.265275-40.955366-201.985654-109.543748-7.848602-12.044418-4.452851-28.183287 7.606048-36.04637s28.183287-4.43837 36.04637 7.606048c35.050814 53.774508 94.244767 85.889336 158.333236 85.889336 65.322958 0 125.125106-33.056081 159.973188-88.43434C675.993424 635.454382 684.453841 631.142719 693.113368 631.142719z"/></svg><span id="greeting"/></div>Step 9: Last Save Your 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.