Trik yang akan dibahas pada artikel kali ini adalah, menampilkan loading screen transparan pada blog, ketika halaman blog dibuka oleh pengunjung. Hal ini penting untuk mengalihkan perhatian pengunjung, ketika halaman blog membutuhkan waktu loading yang lebih lama, karena memuat grafis dengan resolusi yang tinggi atau ketika sedang memuat widget dengan javascript yang agak berat. Selain untuk mempercantik tampilan blog, trik ini juga dimaksudkan Persentase bounce rate blog, agar pengunjung tidak terburu-buru menutup jendela browsernya sampai halaman blog terbuka secara sempurna.
Dan jika sobat suka trik ini, berikut adalah cara memasang transparent loading screen di blog.
- Login ke blogger dengan ID sobat.
- Klik nama blog anda pada dashboard blogger lalu pilih menu Template
- Sebaiknya Backup template sobatterlebih dahulu
- Kemudian klik Template->> Edit HTML ->> Proceed.
- Cari kode <head> pada dokumen HTML template anda, copy script di bawah ini dan paste tepat di bawah kode <head>
| <script type="text/javascript"> (function() { if (window.addEventListener) { window.addEventListener("load", hide_loading_screen, false); } else { window.attachEvent("onload", hide_loading_screen); } })(); function display_loading_screen() { document.getElementById("loading_screen").style.display = 'block'; } function hide_loading_screen() { document.getElementById("loading_screen").style.display = 'none'; } </script> <style type="text/css"> #loading_screen { display: none; position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; background-color: black; color: white; text-align: center; padding-top: 100px; opacity: 0.5; filter: alpha(opacity=50); } </style> |
- Selanjutnya cari kode </body> pada dokumen HTML template sobat, copy script di bawah ini dan paste tepat di atas kode </body>
| <div id="loading_screen"> <p> <img src="https://lh6.googleusercontent.com/-lfySfOMadl8/T7hpB9CKLqI/AAAAAAAABz0/LxMf7daxniA/s50/darkloading.gif" /> <br /> <h1>Loading...</h1> <br /> <h3>Please Wait...</h3> </p> </div> <script type="text/javascript">display_loading_screen();</script> |
- Untuk Loading Image nya kamu bisa pilih di bawah ini cukup mengganti kode src yang berwarna merah
- Simpan template kamu dengan menekan tombol Save Template
- Langkah terakhir periksa blog kamu.
Untuk pilihan Loading Image nya kamu bisa pilih di bawah
Blogger Loading Effect Style1]
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU3dMX_0fNCc8MSPtThSmjtHlpyjLKivjmD6Si4NEDEKCV9gvBX16_JPF0ZQFgS1twmxEdjGjl96thJvI6FOnSCbHAJ0TPrNSKVd56LtGZtveTXta-hf22mAjRZ05Icm-JtNG4Ftggw_4_/s1600/loading4.gif
Blogger Loading Effect Style2]
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQcVquuG-OEb7AG_kAuXV_WTl9orGNkbG99-XuZrYlsoJFSfniOA3oZsGdpIpWnhlL7QTQFWZzYW9xP-5t2jhL7-GAtWx5kD_zphToFMOh5YVsLDJ9Si7nTWssUqxI9jwbxy8vFxmF80s_/s1600/loading5.gif
Blogger Loading Effect Style3]
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85b45yE2_hGLhW8aTBhCXARX0b6QvknZ7PnHK1Fna_Vc165s3VqzFFoNafyL5DkWtO87yp-mpED_s0old4nl3BgPq7xTHrZm4toZs_WstT05fs108dRiswFA4wJrnm7ae_XnuiOTbMMKS/s1600/loading6.gif
Blogger Loading Effect Style4]
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZzfOYzz6BcSSTEir3vHi-NGoUw-2wmJrpNTTHCQBPe2xQL2oKXvNQaI1rrMTVhcMVKW0p3VOW5iigzLViCrC9jxAdnuyQDcsi2ehp09S47LYnw0WAjTjdSeFIS-14nOXBVrOJ2g6TQsr/s1600/loading8.gif
Blogger Loading Effect Style5]
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpo_oyVKp7v3gFHCocaPQO1i_ccLnos35ZaabtxV6cbxlFE5eir6S91b6Ws0sQIwWUZPZgrPOMjNLQ6Zv9fxuhPakymFycl2772IuMFp4o12DoDxhDs3HN0dWyKwfMZpJrvKzHgrfF485b/s1600/loading9.gif
Blogger Loading Effect Style6]
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrEYJ-rZ74NdULRiauA_P-2NeAkwSS2KV2LQxXYVj0EbzbPp_RAEZKS3IV4Lyj_5vca3bwnC3UkzKZ_4RSA4CUe3ogGsDjoiBDKZxJ5NvZwolfU9VkzdpTaxkuVJF2sA_EuZ1uYBGxwJGs/s1600/loading10.gif
Blogger Loading Effect Style7]
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0DZS89Ig3R_nMtRmpoOSLTicaCKUm5ek2hpiLHRRb-LpvDJFqvJmyftuEQTgiuyJnpJr0kBJiwuz9GUtRAwV7mS9zcSEA2cwtn6IHmh966SkVdHRuMQXHq11hyTbmKSVi7O7NNHcPBOg/s128-no/Loading1.gif
Blogger Loading Effect Style8]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/Loading2.gif
Blogger Loading Effect Style9]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/Loading3.gif
Blogger Loading Effect Style10]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/Loading4.gif
Blogger Loading Effect Style11]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/Loading5.gif
Blogger Loading Effect Style12]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/Loading6.gif
Blogger Loading Effect Style13]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/Loading7.gif
Blogger Loading Effect Style14]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/Loading8.gif
Blogger Loading Effect Style15]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/Loading9.gif
Blogger Loading Effect Style16]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/MBG-loading-16.gif
Blogger Loading Effect Style17]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/MBG-loading-17.gif
Blogger Loading Effect Style18]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/MBG-Loading-18.gif
Blogger Loading Effect Style19]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/MBG-Loading-19.gif
Blogger Loading Effect Style20]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/MBG-loading-20.gif
Blogger Loading Effect Style21]
https://www.mybloggerguides.com/wp-content/uploads/2016/07/MBG-Loading-21.gif
0 Comments