bergabung di grup telegram kami

Wendy Code

Beranda
Widget

cara membuat splash screen di blogger

cara membuat splash screen di blogger dengan html css dan javascript ,widget ini juga sudah menggunakan sessionStorage yang hanya akan muncul 1 kali

cara membuat splash screen di blogger

cara membuat splash screen di blogger dengan html css dan javascript

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat splash screen di blogger dengan html css dan javascript.

sekilas info splash screen adalah sebuah pop up yang menampilkan gambar atau logo dari sebuah aplikasi atau website saat pertama kali aplikasi atau website itu di buka.

biasanya splash screen ini sering kita jumpai pada aplikasi mobile seperti youtube dan aplikasi lainnya sedangkan website itu seperti google adsanse juga menggunakan splash screen.

widget ini juga sudah menggunakan sessionStorage yang artinya splash screen hanya akan muncul 1 kali saja sampai pengunjung menutup browser dan membukanya kembali.

untuk demonya kalian bisa melihat melalui tombol di bawah ini, ok buat kalian yang ingin membuatnya mari simak caranya di bawah ini.

Cara Membuat Splash Screen Di Blogger

silakan masuk ke blogger > tema > edit html salin css di bawah ini dan letkkan di atas kode ]]></b:skin> atau di atas kode </style>

/* splash screen by wendy code */
.wc-splash-wrap{position:fixed;height:100%;width:100%;top:0;left:0;right:0;bottom:0;background:#fefefe;z-index:9999999}
.wc-splash-wrap .wc-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}
.wc-splash-wrap .wc-splash-screen img{width:150px;height:150px}
.wc-splash-wrap .wc-splash-screen span{text-align:center;font-size:15px;font-weight:600;margin:20px;font-family:Noto Sans', sans-serif}

lanjut meletakkan html ini tepat di bawah kode <body> atau cari serupa <body karena biasanya terdapat class dan id di dalam tag body.

<div class='wc-splash-wrap'>
<div class='wc-splash-screen'>
<img alt='wendycode' src='https://cdn.staticaly.com/img/1.bp.blogspot.com/-Z1dA_G3X3Ro/X9SMbhKD9xI/AAAAAAAACO8/KAGlrPV2SncdnM2yXR3tzFqR08V9ebF7QCNcBGAsYHQ/s0/wendycode-logo-s300.png'/>
<span>wendy code</span>
</div>  
</div>

bagian yang saya tandai silakan di ubah dengan url gambar logo kalian dan nama blog kalian.

dan terakhir salin javascript di bawah ini dan letakkan di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; jika sudah jangan lupa untuk klik simpan.

<script>
//<![CDATA[
/*
* Wendy Code Splash Screen
* Copyright (c) 2021 https://www.wendycode.com
* Javascript Pure
*/
var splashSession = sessionStorage.getItem('splashSession');
document.addEventListener('DOMContentLoaded',function(){
if (splashSession === null) {
document.querySelector('.wc-splash-screen').style.opacity ='1';
splashSession = sessionStorage.setItem('splashSession',true);
setTimeout(function(){
document.querySelector('.wc-splash-wrap').style.display ='none';
}, 3000);
} else{
document.querySelector('.wc-splash-wrap').style.display ='none';
}});
//]]> 
</script>

ok jadi sekian cara membuat splash screen di blogger yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.

Baca juga :
tutorial blogger
perlu bantuan?