Colocar Efeito Loading No Blogger e Personalizar do Seu Jeito
 |
| Imagem tirada do site turbo-ofilme.com.br |
Nesta postagem estarei mostrando para vocês uma forma bem interessante de colocar efeito carregando na página do seu site. A forma que ire mostra fica muito fácil para personalizar. Vou mostrar passo a passo.
Você já viu a demonstração, para ver de novo, recarregue a página para ver o efeito novamentel!!!
Deu para ver o efeito?
Para colocar em seu blog é bem fácil mesmo. Eu resumi o código para ficar mais fácil compreender o Javascript.
Para colocá-lo, entre em "Editar HTML" e procure pela tag
<body>
Se não encontrar, procure por
<body expr:class='"loading" + data:blog.mobileClass'>
Tendo encontrado, cole o seguinte código ABAIXO
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.turbo-ofilme.com.br/images/loader.gif') 50% 50% no-repeat black;
}
</style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type='text/javascript'>
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<div class='loader'></div>
A parte destacada de vermelho, corresponde ao javascript. Caso você já tenha o javascript em seu blog, apague esta parte para não dar conflito. A parte destacada de azul, corresponde a imagem que ficará no meio. E o mais importante, a cor de fundo (parte destacada de rosa); Isso quer dizer que se você for colocar uma imagem de sua preferência, mude a cor do fundo também para ficar mais bonito de se ver.
