Personalize o carregamento das páginas do seu blog em dois passos simples

Olá galera, hoje vim trazer algo bem especial que vai te ajudar na personalização de seu blog / site, trata-se de script que carregará suas páginas a cada atualização no navegador, isso tem somente a função de estética, mas eu pessoalmente adorei quando usei em um de meus blogs e agora tô repassando pra vocês.
Se você quer ver como funciona isso!!! É só seguir este simples tutorial:

Bom, a primeira coisa que eu aconselho que faça é um backup do seu blog caso não dê certo com e você queira voltar às configurações anteriores de seu blog.

O primeiro passo é colocar esse código que você certamente está vendo abaixo logo acima da tag </body>

<script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="page-loader">Aguarde...</div>'); $(window).on("beforeunload", function() {     $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>


Obs: Você pode mudar a palavra "Aguarde..." pelo de sua preferencia, quando a página for atualizada (F5) aparecerá o seguinte carregamento (veja o exemplo na imagem abaixo) mas lembre-se esse foi eu quem escolheu, você pode ficar a vontade para mexer, ok

O segundo passo é implantar o código CSS para que possa personalizar este script, faça assim: procure na caixa de código do seu blog o trecho ]]></b:skin> feito isso, copie o código abaixo logo acima desse trecho

#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#6495ED url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaw_3dF-vpilrjuIlq5n8KvWxck1aewk_SyPiYIKzwOAO2C366xmOj6sL85EFyaM5dBB3FAUHW-RkLYXPO7nvBa_qNBjkcVHXXMsuqz1CUgLvXbr2YaAC9p-47eqgUbKj7PqF2NVsuXqH_/s1600/zahnrad.gif') no-repeat 50% 50%; color:#fff; padding:1em 1.2em; display:none; }

Obs: Você pode mudar a cor do fundo e a imagem GIF que estão destacados no código em vermelho pra sua preferência, ok

Espero que tenha dado certo com você, dúvidas comenta aí. Até a próxima!