Pemblokir Iklan Terdeteksi

Matikan adBlock anda untuk dapat mengakses situs ini.

translate to english

cara membuat splash screen di blogger

cara membuat splash screen di blogger

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 letakkan di atas kode ]]></b:skin>

/* 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://blog.choipanwendy.com
* Use Wisely Open source Code Don't Delete Creator Credit
* 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 :

Mau donasi lewat mana?

Paypal
Bank Mandiri - An.wendy yulianto / Rek - 1150006900577
Traktir kreator minum kopi dengan cara memberi sedikit donasi. klik icon panah di atas