Efeito Loading Simples em Jquery no carregamento do blog - Personalizado

Nesta postagem compartilho com vocês este código de carregamento que fará um efeito carregando enquanto a página realmente é carregada.

Primeiramente vamos aplicar o estilo CSS. Para fazer isso... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrada a tag, cole ACIMA dela o seguinte estilo css

/* Loading
-----------------------------------------------
#loading {
background-image:url('http://vestibular2.bilac.com.br/PortalCandidato/Imagens/Carregando.gif');
text-align: left;
position:fixed;
width: 100%;
height: 900px;
line-height: 1px;
}
#loading2 {
}

Agora, dê um Ctrl + F e procure por 

(Cabeçalho)

Tendo encontrado a linha do cabeçalho, cole ABAIXO dela o seguinte código

<!-- Loading -->
<div id='loading'><div id='loading2'><font color='#ffffff' size='3' style='font: italic;'><b>
<center><h2><i><font color='#559900'>AGUARDE O CARREGAMENTO!...</font></i></h2>
<br/><img repeat='y' src='http://vestibular2.bilac.com.br/PortalCandidato/Imagens/Carregando.gif'/>
<div class='header-wrapper'></div>
</center></b></font></div>
</div>
<script>
// CARREGANDO //
function addLoadEvent(func){var oldonload = window.onload;if(typeof window.onload!='function'){
window.onload=func;}else{
window.onload=function(){
if(oldonload){
oldonload();}func();}}}addLoadEvent(function(){document.getElementById("loading").style.display="none";});
</script>
<script language='JavaScript'>
function mostra(){
if(window.onload ){
document.getElementById('loading').style.display="none"
document.getElementById('conteudo').style.visibility="visible"
}
}
window.onload=mostra
</script>

A parte destaca de vermelho no código é a cor da frase: AGUARDE O CARREGAMENTO!...

Em Azul é a imagem animada que você pode estar substituindo por outra de seu gosto.