04/07/2018

Efeito de carregamento no blog com CSS (Loading) [004]


Ohayooooooooooooooooo! Hoje trago um tutorial que amo! Amo! Amo! Amo! Eu já vi em alguns blogs, ele é bem parecido com o Imagem de carregamento no blog. A diferença é que esse calcula o tempo de carregamento do seu blog, e só some após todo carregado. Exemplo tenho certeza que já se deparo com um blog que carregava primeiro o banner depois a sidebar, então abria a postagem e ainda dava uma leve travadinha no seu computador. Esse CSS resolve o problema. Se o blog é muito pesado ele tomará conta da pagina enquanto ela carrega sumindo assim que tudo carregado


Tenho um pequeno exemplo aqui, lembrando que quanto mais pesado for o blog mais tempo ele ficará para carregar. O layout no exemplo acima não possui muitos scripts, e sem tempo de carregar é mediano, dependendo da velocidade da internet de cada. Sendo uma boa amostra para quem tem layous pesados

1. Procure por ]]></b:skin> e acima dele cole:

Códigos
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 99;
}
#status {
width: 500px;
height: 500px;
position: absolute;
left: 50%;
z-index:99999;
top: 50%;
background-image: url(http://img.ffffound.com/static-data/assets/6/77443320c6509d6b500e288695ee953502ecbd6d_m.gif);
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
}

2.  Procure por:

  <body>

 Se não achar procure por:

 <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Quando achar cole o próximo código acima dele:

Códigos
<div id='preloader'>
<div id='status'/>
</div>

3. Pesquise por </head> baixo dele cole esse código:

Códigos


Salve e visualize!

Créditos: Paty Neh Paty & Stackoverflow.

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345