MULTI PASTE - 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 untuk menekan persentasi bounce rate blog, agar pengunjung tidak terburu-buru menutup jendela browsernya sampai halaman blog terbuka secara sempurna.
Anda dapat melihat transparent loading screen terpasang pada blog ini, dan jika anda suka trik ini, berikut adalah cara memasang transparent loading screen di blog.
- Login ke blogger dengan ID anda.
- Klik nama blog anda pada dashboard blogger lalu pilih menu Template
- Sebaiknya backup template anda terlebih 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>
(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 anda, 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>
<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>
- Simpan template anda dengan menekan tombol Save Template
- Langkah terakhir periksa blog anda jika berhasil ucapkan Alhamdulillah...