Imagem de carregamento no Blogger (Loading) [001]

Yo! Yo! Yo! Tragos um tutorial que já utilizei em alguns dos meus layouts, e decidi compartilhar com vocês hoje. Hoje trago um efeito de carregamento no blogger, ele funciona de forma bem simples. Ao abrir seu blog, vai aparecer uma imagem de carregamento, imagem de sua escolha. Ele dura poucos segundos, mas suficiente para dar um estilo mais profissional ao blog. Para adicionar o efeito ao seu blog, basta seguir o tutorial mais abaixo. 

Brevia do efeito

Abra o Painel do blog, escolha qual blog deseja adicionar o efeito, Então siga para Modelo> HTML. Ao abrir o HTML de um clique na área e ative em seu teclado a busca CTRL+F. Na barra de pesquisa cole e pesquise </head> acima dele cole:

Códigos

<script src='https://sites.google.com/site/drwtexte/dewplay/jquery.min.js' type='text/javascript'></script>

Nota se você ja tiver jquery instalado ignore essa etapa para não dar conflito.

Agora acima de </head> cole:

Códigos

<style> /* LOADING HALAMAN */ #loadingHalaman { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHai9Lah3zxJ2Dxdb-C6d8Jf-LGmde_zFYm3X8pSakJqwFzfSz0-PzVQjq5LlPDaHBlnJehDU94WveccDVULJ7xcF2m0XedBU-mBUh9Oq14d2JQ24mAgkMrFa16dqRQoCozG6gYByLaY/s1600/carrega.giff) no-repeat center; background-color:rgba(0, 0, 0, 0.32); width:100%;height:100%; position: fixed; left: 0px; top:0px; z-index: +100000; } </style>

A parte marcada em verde é a url da imagem, pode troca-lá ou deixar somente texto. 

Procure por:

Códigos

</body>

Abaixo dele cole:

Códigos

<div id="loadingHalaman"></div>

Agora acima de </body> cole:

Códigos

<script>
//<![CDATA[
//Loading Halaman
$(window).bind("load", function() {
$('#loadingHalaman').slideUp(1000);
});
//]]></script>

Salve, verifique e prontinho! Créditos a My bloggerSEO.