Mas o que modificar no blog para deixá-lo mais rápido, quais coisas devemos retirar? A resposta é simples: as coisas mais pesadas nos sites e blogs de maneira geral são vídeos, musicas, slides de fotos, gifs animados, fotos. Existe um site que você pode analisar seu blog e saber quais são as coisas que mais demoram em carregar é o Pingdom Tools.
Veja na imagem abaixo a coluna do lado direito mostra o tamanho de cada arquivo carregado em nosso blog assim você poderá achar e retirar o que mais demorar em carregar no seu blog, mas tenha calma nem todos os arquivos você poderá remover, pois alguns fazem parte do blogger.
Outra coisa bem interessante para fazer é otimizar as imagens, ou seja, salvar a mesma imagem num formato que fique mais rápida para carregar veja dois sites que fazem esse serviço:
Free Image Optimizer
Envie a imagem clicando no botão selecionar arquivo, clique em optimize now e depois no botão download to your computer para salvar a imagem otimizada no seu computador, então poderá usar essa imagem mais leve no seu blog.
Online Image Optimizer
Da mesma maneira que o anterior clique em selecionar arquivo ou coloque a url de uma imagem e clique no botão optime. A diferença é que neste site você poderá ver sua imagem salva com diferentes níveis de qualidade e poderá escolher qual delas utilizará. Lembrem-se quando maior a qualidade da imagem mais tempo ela demorar em carregar.
Veja também:
Mais Leitores, Assinantes de Feed e Visitas para Blog
Aparecer no Google, Yahoo e outros
Ganhar Tempo e Conseguir mais Visitas no Blog
Esperamos que gostem destas sugestões para deixar seu blog mais leve e as dicas de sites para otimizar imagens.
eu ainda não conheci os sites... achei bem legal
ResponderExcluirBom também é o fileminimizer, que consegue as vezes reduzir o peso de imagens em até 97%, e alem disso trabalha com varios formatos.
ResponderExcluir----------------------------------------------
mas fabiano, tem algum que trabalhe assim com gifs animados?
Markos
ResponderExcluirreduzir o tamanho dos gifs é mais complicado justamente porque para ter animação tem que ser no formato gif animado e esse formato perde qualidade se mexer nas configurações padrão dele.
É possivel ter dominio (.com ou .com .br ) gratis ?
ResponderExcluirJeferson Santos
ResponderExcluiracho que não é possivel ter um dominio .com ou .com.br gratis
Eu gostaria de saber como fazer um menu Horizontal onde quando vc passa o mause sobre o nome apareça os temas(Exemplo> Jogos de Pc ai vc passa o mause e aparece Jogos de ação de aventura...)
ResponderExcluirSe tiver no blog gostaria de saber onde tá que eu ão encontrei.
Obrigado. Dicas para Blog NOTA 10000
Jeferson Santos
ResponderExcluirveja esse código para fazer Como Colocar Submenu no Blog
fabiano pq vc nao posta os arquivos que te mandei?
ResponderExcluirhey Fabiano, t]vim aqui falar que eu achei um código que se vc clicar nele a janela fecha, bom, não testei ainda, mas acho que posso ajudar em alguma coisa :)
ResponderExcluirfaltou colocar o < no inicio e o:
> no final
span onclick="window.close();" class="close-win">Fechar esta janela</span
quais arquivos você me mandou?.... não estou lembrado de receber nada para fazer postagem
ResponderExcluirnao estou conseguindo salvar a imagem no 1º site...ta salvando como html ;/
ResponderExcluire no segundo nao estou conseguindo ver a imagem ;/
consegui rs
ResponderExcluirvlww aee pelas dicas
parabéns pela dia !
ResponderExcluirNa tentativa de encontrar uma maneira de postar minhas musicas em mp3 em meu blog descobri o site longnplay.com la vc pode montar seu própio album musical além disto é uma radio com botão de controle,assim que ouve tem a opção de parar a musica ou baixar o som.
ResponderExcluirÉ como uma radio mesmo,super bom.
Reduzindo o peso das imagens, o carregamento da pagina pode diminuir 80% o tempo de espera. é muito importante para o webmasters.
ResponderExcluirmuito boa dica cara.
ResponderExcluirEstou montando um site, e ao invés de por texto na home, prefiro usar gifs estática com texto.
nem preciso dizer que me quebrou um galhão.
vlw
Excelente artigo, sem dúvida a optimização das imagens é um factor verdadeiramente relevante. Um site/blog que demore mto a carregar pode fazer com que um visitante desista e vá procurar outro.
ResponderExcluiros otimizadores são bons, mas nenhum substitui o photoshop, acho que pra quem tem um blogger tenque usar o photoshop, testei o programa com imagens normais e ele realmente funciona e deixa comprensivel com uma qualidade menor que o photoshop, mas para imagens de alta resolução, esses otimizadores são inuteis. E tambem o programa eh bom pra quem nao quer perder muito tempo otimizando no photoshop, concerteza ele oferece velocidade e praticidade, coisa que o photoshop nao proporciona. So queria terminar falando que ficou muito bom o topico.
ResponderExcluirconcordo com você o photoshop realmente é o melhor mas é um programa bem pesado para usar e muita gente prefere editar imagens online ou programas mais leves...
ResponderExcluirHey!
ResponderExcluirEu gostaria de saber se tem alguma postagem aqui que fala sobre como tirar aquelas bordas ou sombras das imagens que colocamos nas postagens...
Pois como o fundo do meu blog é branco e as imagens que eu uso são do tipo Clip art, adoraria que ficasse tudo camuflado.
Thank's =)
veja se no seu html tem post img{... ou algo aparece se tiver isso é o que faz as bordas nas imagens, então apague os trechos border...
ResponderExcluirOLÁ, FABIANO!
ResponderExcluirTUDO BEM?
TEU BLOG É UM 10!
COMO FAÇO PARA COLOCAR APENAS UMA FOTO NO BLOG E AO CLICAR NELA AS DEMAIS ABRIRÃO, QUAL É O SEGREDO.
AGRADEÇO ANTECIPADAMENTE
SANDRA MELO
já fizemos algumas galerias de imagens em nosso sites... mas não é nenhum código especial, na verdade são paginas criadas em nossos outros sites, como por exemplo Mensagens Otimismo - Melhore sua Vida
ResponderExcluirclique na imagem... a pagina é outro site (nosso também)
Gostei das dicas mais acho que ninguém vai querer ficar fazendo isso em cada imagem que for publicar em um blog.
ResponderExcluirFelipe
ResponderExcluirminha idéia não é fazer isso a cada imagem, mas apenas de vez em quando para ver quais são os elementos mais pesados da pagina... nem sempre são imagens
Fabiano,boa noite.Hoje fiz minha primeira postagem no blog,mas estou com um problema.Ao postar a foto parece que o conteúdo do blog se move.E na parte de baixo aparece uma faixa igual ao topo do blog.E se escrevo o texto sobre a foto,fica ainda pior.Aparece uma parte branca larga.O que pode estar acontecendo?Estava toda animada para iniciar minhas postagens. Por favor,você pode dar uma olhada? amazingcakery.blogspot.com
ResponderExcluiro código da borda da imagem é esse
ResponderExcluir.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: #ffffff;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
tente apagar isso do seu html e veja se é isso que você queria fazer.
Fabiano, ficou bacana o novo visual da sua página.Está mais leve.Gostei muito.Bem,fiz o que você falou,mas não mudou nada.O problema ocorre somente na área da postagem.Aparece a faixa rosa igual a do topo do blog.No internet explorer aparece mais larga ainda e parte do rodapé fica nela.
ResponderExcluirE tem como tirar aquela linha pontilhada no rodapé da página?Mais uma vez,muito obrigada pela ajuda.
Ana Cristina
ResponderExcluiré bom saber que gostou da mudança, mas ainda vamos fazer varios ajustes, sabe como é .. blog nunca fica pronto.
sobre o seu blog imagem de fundo está se repetindo
body {
font: normal normal 14px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
color: #666666;
background: #ffffff url(http://3.bp.blogspot.com/-Kf3Df4h2nUA/T1Ng6hpLWII/AAAAAAAACS0/fBwzLPz1cK8/s0/backgroundcharmanadjesus.jpg) repeat scroll top center;
padding: 0 0 0 0;
}
o jeito de colocar aquelas colunas seria em outro estilo e não no body, veja aqui:
.main-inner .columns {padding-left: 340px;padding-right: 0px;background-image: url(http://acessoriosparablogs.com.br/template-dicas.jpg);}
essas são as colunas do nosso blog veja que a imagem tem apenas 6 pixels de altura e se repete pela pagina toda
http://acessoriosparablogs.com.br/template-dicas.jpg
então precisaria cortar a imagem de fundo e usar do jeito que falamos
Fabiano,o que você diz cortar a imagem,seria cortá-la em 3 partes?Digo colocar deste jeito.Vi num comentário aqui no seu blog a pergunta com este código.Se for o caso,não consigo encontrar estes códigos no modelo simple,que é o que estou usando.
ResponderExcluir#header-wrapper {
width:900px;
background:#000000;
background-image: url (imagem escolhida) no-repeat;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
background:#000000;
background-image: url (imagem escolhida) repeat-y;
width: 900px;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}
#footer {
width:900px;
background:#000000;
background-image: url (imagem escolhida) no-repeat;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
procure pelos nomes: #header-wrapper
ResponderExcluiro restante do ´código não é exatamente igual na pagina editar html do blogger
Fabiano,não é fácil arrumar a casa(rs).Vou tentar colocar o background desta maneira.Mas quando você fala das colunas,no caso das suas,seriam estas cinza claro?E esse tal de .main-inner... , é onde deve-se colocá-las?E se eu colocar a imagem recortada,preciso fazer usar esse .mai-inner...?Desculpe-me as perguntas tolas.É que não entendo nada de hmtl.Abraço e,mais uma vez,muito obrigada.
ResponderExcluir