Splash screen in blogger using Vanilla JavaScript | LayZee UI

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:-

Demo

How to make Splash Screen on Blogger

Go to blogger > themes > edit html cand opy the css below and place it above the

code ]]></b:skin>

/* 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 <body> or search similar to <body because usually there is a class and id inside the body tag.

<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 </body> or </body> If so, don't forget to click Save.

<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