Follow Us @soratemplates

segunda-feira, 28 de maio de 2012

Gaya Design+Pré-carregando o Blog

Olá novamente!
Quero compartilhar com vcs mais um link dentre meus favoritos internacionais, o site Gaya Design: http://www.gayadesign.com
Acredito que vocês vão gostar também de um dos tutoriais de lá que mostra como pré-carregar o blog todo, textos, imagens e gadgets, dando ao leitor uma forma de esperar que o blog carregue mais "personalizada". Vamos lá!
O Gaya Design é um site comandado pelo holandês Gaya Kessler, que compartilha com seus leitores suas descobertas, criações e projetos feitos por ele mesmo, decisão que tomou após começar a aprender sobre PHP em seu tempo livre.
Assim, no Gaya Design são divulgados truques e dicas com foco em XHTML, JavaScript, PHP e CSS, com tutoriais muito legais mostrando como fazer tudo, alguns até difíceis (pelo menos para mim ^-^). Ele publica também alguns artigos sobre diferentes temas que podem auxiliar bastante.
O que mais gosto nesse site são os tutoriais. Mesmo que eu não entenda alguns, seja porque inglês ainda não é meu ponto forte, seja porque não entendi mesmo rsrsrs...não se pode negar a qualidade das coisas que ele ensina como fazer.
Dentre meus favoritos está o que ele mostra como fazer as chaminés que se encontram no blog dele, que saem fumaça e não são fixas, o que permite que a gente "brinque" um pouquinho com elas, assim como o menu aqui do blog que é móvel, e o de como pré-carregar o blog! Esse último foi mais fácil compreender graças a ajuda do Ciudad Blogger.
Funciona assim: quando as pessoas acessarem o seu site, irão visualizar uma home diferente, que mostra quantos % falta para que seu site carregue completamente, com barrinha mostrando o progresso, números e em uma área totalmente personalizada, tipo quando um game carrega.
Super lindo e maravilhoso, MAS...como tudo tem um porém, o tutorial pode dar errado devido a algumas coisas que merecem cuidado, como o fato de que ele funciona com jQuery em versão mais atualizada da que talvez vc use. A desse tuto é a 1.4.2; se em seu html tiver essa linha:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
...pode dar problema. Outro problema que ainda não encontrei a solução é um relacionado ao progresso, que trava em 0%; isso ocorreu quando tentei aqui no Reino Kawaii ;___; De qualquer forma, faça em um blog de testes primeiro ou faça um backup do seu blog salvando o modelo dele. Testei no Modelo Travel editado pelo Designer do Blogger e deu certo.
Chega de blá blá blá neh...vamos agir!
1. A primeira coisa a fazer é baixar e hospedar este arquivo. O arquivo a ser hospedado é queryloader.js
Saiba como hospedar arquivos aqui: http://reinokawaii.blogspot.com.br/2012/05/tumblr-no-bloghospedar-arquivospc-e.html
2. Acesse o HTML do seu blog e depois de <head> acrescente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src=' URL DO ARQUIVO QUE VOCE HOSPEDOU ' type='text/javascript'/>
3. Antes de ]]></b:skin> coloque este código:

.QOverlay {
background: url(URL DA IMAGEM) repeat; /* Cor ou imagem do plano de fundo */
z-index: 9999;
}

.QLoader {
background-color: #ffffff; /* Cor da barra de carregamento */
height: 10px; /* Grossura da barra de carregamento */
}

.QAmt { /* Porcentagem */
color:#fcc;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
Veja que em background: url(URL DA IMAGEM) repeat você pode substituir a imagem por uma cor, deixando assim: background-color: #código da cor; assim como fazer o inverso nas áreas em negrito e personalizar o estilo da porcentagem. Se preferir, use este estilo que personalizei:


.QOverlay {
background: url(http://1.bp.blogspot.com/-uve1BG94d2w/T2YvvLn_P1I/AAAAAAAAFu4/kdsCiLgIA2Q/s1600/M2.gif) repeat; /* Cor ou Imagem do plano de fundo. Para colocar imagem: background: url(URL DA IMAGEM) repeat */
z-index: 9999;
}

.QLoader {
background-color: #ffffff; /* Cor da barra de carregamento */
height: 10px; /* Grossura da barra de carregamento */
}

.QAmt { /* Estilos do numero de porcentagem */
color:#ffffff;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:40px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
4. Por fim, antes de </body> acrescente:

<script type='text/javascript'>
QueryLoader.init();
</script>
Agora é a hora de suspense...funcionou ou não?! Bom, clique em visualizar e na página que se abre, caso mostre o blog carregando com esse efeito conforme você editou e depois normalmente como a gente sempre visualiza, deu certo! Se travar no 0% antes ou depois do blog carregar...não deu não :'( Então pode ter ocorrido um dos problemas citados anteriormente.
Bom, vou continuar tentando aqui esse e o tutorial da chaminé, bem parecido com o meu menu, ou buscar alternativas. Desejo sorte a vcs também! E sem dúvidas o Gaya é um ótimo lugar pra gente aprender mais coisas legais, adicionar aos nossos conhecimentos e encantar os leitores.
Beijus<3

8 comentários:

  1. Adorei o blog!! Já estou seguindo!! Bjoss
    http://tanamaounhas.blogspot.com.br/

    ResponderExcluir
  2. Boa página, consulte os tutoriais!

    Eu adorei a foto do ursinho!


    Beijos~

    ResponderExcluir
  3. Amei a dica do site, vou dar uma olhada nos tutos :)

    bjãoo

    ResponderExcluir
  4. Poderia fazer um tutorial de como fazer essas bordas legais que separam as postagens das colunas por favor? ^.^ se já existir me mand o link muito obrigada viu? beijões e milhões de beijões!

    blog:http://brightnessgirl.blogspot.com.br

    ResponderExcluir
  5. Adooorei o blog, aceita afiliação ?/

    Responde lá no blog,beeijos ><
    deluxesphotoscape.blogspot.com

    ResponderExcluir
  6. :v:Gabi: Seja bem-vinda! Beijus<3
    :v:Mary: Fico feliz que tenha gostado! Eu também adoro o ursinho :3 Beijus<3
    :v:Gizaa: Acho que vc vai adorar! Beijus<3
    :v:Beatriz: Você fala essas bordas brancas tipo babadinhos? Ou essa pontilhada rosa? Se for as brancas, elas foram feitas na imagem mesmo, porque uso um template base em que o layout pode ser feito com 3 imagens; já a pontilhada foi feita no HTML mesmo. Me diz qual delas para que eu possa te dar uma resposta melhor ok? Beijus<3
    :v:Deluxes Photoscape: Que bom que gostou! Bem-vindo! Beijus<3
    Obrigada a todos!!!

    ResponderExcluir
  7. Então Beatriz, esses babadinhos foram feitos com imagens; eu uso um template base da Karen do site Karen Star (veja o link ali na sidebar ou na F.A.Q). O layout que ela disponibiliza para base possui 3 imagens para editar. Eu apenas editei essas imagens.
    De qualquer modo, vou ver se encontro alguma maneira de colocar bordas fofas no layout pelo HTML ok?
    Beijus:cat:

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart