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.
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'/>3. Antes de ]]></b:skin> coloque este código:
<script src=' URL DO ARQUIVO QUE VOCE HOSPEDOU ' type='text/javascript'/>
.QOverlay {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:
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;
}
.QOverlay {4. Por fim, antes de </body> acrescente:
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyBPhRXk-3A8I54-4nrp3Y_POAtuZ9SUGF2TptEkxLKrTlV269LQAHJI4NnjUEw0mRG__YdLUNKqlkRElx-KJFoVYhU890ymb3bcie-5VuB3tuEIg-Mdoc3XRrMvpwlXkb8ViLj5dFPdo/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;
}
<script type='text/javascript'>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.
QueryLoader.init();
</script>
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
Boa página, consulte os tutoriais!
ResponderExcluirEu adorei a foto do ursinho!
Beijos~
Amei a dica do site, vou dar uma olhada nos tutos :)
ResponderExcluirbjãoo
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!
ResponderExcluirblog:http://brightnessgirl.blogspot.com.br
Adooorei o blog, aceita afiliação ?/
ResponderExcluirResponde lá no blog,beeijos ><
deluxesphotoscape.blogspot.com
:v:Gabi: Seja bem-vinda! Beijus<3
ResponderExcluir: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!!!
São os babadinhos fofos
ResponderExcluirEntã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.
ResponderExcluirDe qualquer modo, vou ver se encontro alguma maneira de colocar bordas fofas no layout pelo HTML ok?
Beijus:cat: