Setelah pada postingan sebelumnya ane membahas mengenai cara pasang efek kembang api pada halaman blog, kini saatnya ane membawakan tutorial blogger yang lain, yaitu cara pasang efek loading pada blog.Efek loading ini akan terlihat pada saat kita membuka halam blog, yang mana akan terlihat seperti proses loading yang biasa kita jumpai. Jadi sebelum tampil halaman yang utuh, maka akan ada tampilan loading pada halaman blog anda.
Untuk dapat memasang efek loading pada blogspot, dapat dilakukan dengan langkah seperti ini
Login ke akun blogger > rancangan > edit HTML > cari kode <body>
Paste kode dibawah ini tepat diatas kode <div id="page">
!-- Loading Page Script – nophall – http://lingkaranmaya.blogspot.com -->
<!-- Loading Page Script – IT Cyber Syndicate – http://it-scriptsyndicate.blogspot.com/ -->
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>
<!-- Loading Page Script – IT Cyber Syndicate – http://it-scriptsyndicate.blogspot.com/ -->
<style type="text/css">
/* add loading image */
body {
background:#4B4B4B url(http://static.int.crazydavinci.net/images/loading.gif) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>
Selanjutnya cari lagi kode </body> dan tambah kode </div> ditasa kode </body>
Simpan template
Selesai
Nah sobat maya begitulah cara membuat efek loading pada blogspot.
Sekian dulu postingan kali ini semoga bisa bermanfaat, dan selamat mencoba.
Terima kasih telah singgah di blog ini dan membaca artikel mengenai cara membuat efek loading pada halaman blog
0 komentar:
Speak up your mind
Tell us what you're thinking... !