 |
| © Kaily | Splash screen in blogger using Vanilla JavaScript | LayZee UI | Kaily. |
Hello, Bloggers! Welcome to Kaily.in
Today, I will be sharing how to make a Splash screen in blogger using Vanilla JavaScript and of course also with HTML and CSS.
Usually, we often encounter splash screen on mobile applications such as YouTube and other applications, while websites such as Google Adsense also use a splash screen.
At a glance the splash screen info is a pop up that displays an image or logo of an application or website the first time the application or website is opened.
This widget also uses sessionStorage, which means that the splash screen will only appear once until the visitor closes the browser and reopens it.
for the demo, you can see via the button below:-
How to make Splash Screen on Blogger
Go to blogger >
code
/* splash screen by Kaily */
.kaily-splash-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:#fefefe;z-index:9999999}
.kaily-splash-wrap .kaily-splash-screen{position:relative;top:50%;left:50%;display:flex;background:transparent;flex-direction:column;align-items:center;width:100%;transform: translate(-50% , -50%) scale(0.97);opacity:0}
.kaily-splash-wrap .kaily-splash-screen img{width:150px;height:150px}
.kaily-splash-wrap .kaily-splash-screen span{text-align:center;font-size:15px;font-weight:600;margin:20px;font-family:Noto Sans', sans-serif}continue to put this html just below the code
<div class='kaily-splash-wrap'>
<div class='kaily-splash-screen'>
<img alt='Kaily' src='Your Logo/Image Url Here'/>
<span>Kaily</span>
</div>
</div>please change the part that I marked with your logo/image url and your blog name.
and finally copy the javascript below and place it above the code
<script>
//<![CDATA[
/*
* Splash Screen by Kaily
* Copyright (c) 2022 https://www.kaily.in
* Pure Javascript
*/
var splashSession = sessionStorage.getItem('splashSession');
document.addEventListener('DOMContentLoaded',function(){
if (splashSession === null) {
document.querySelector('.kaily-splash-screen').style.opacity ='1';
splashSession = sessionStorage.setItem('splashSession',true);
setTimeout(function(){
document.querySelector('.kaily-splash-wrap').style.display ='none';
}, 3000);
} else{
document.querySelector('.kaily-splash-wrap').style.display ='none';
}});
//]]>
</script>ok that's how to make Splash screen in blogger using Vanilla JavaScript that I can share this time, hopefully this is useful and thank you for visiting.
Credit:
www.kaily.in
