Cuidados com o template do blog

| 21 Comentários

Todo cuidado é pouco!
Imagem: Colégio Magno

O template é a cara do seu blog, como os visitantes o veem (sem acento!). Então, a aparência é muito importante para os blogs. Um template mal feito e/ou cheio de imagens e JavaScript pode fazer um visitante nunca mais voltar ao seu blog.
Pensando nisso, selecionei alguns cuidados que você que, como eu, faz o seu próprio template deve tomar:

Cuidado com o tempo de carregamento!

Como eu já disse em “Medindo o tempo de carregamento do seu blog/site”, um blog pesado “espanta” visitantes impacientes. Então, tente deixar o seu template o mais leve possível.

Se o seu blog for de imagens, como por exemplo, o ClickImagens, seu template não pode ser muito “pesado”, pois, adicionando as imagens, seu blog demorará mais ainda para ser carregado.

Se o seu blog tem muitos scripts JavaScript, além de deixar o carregamento lento, dependendo da quantidade de scripts e do computador do visitante, pode até travar o navegador do visitante, o que faz muitos visitantes leigos acharem que seu blog contém vírus e nunca mais voltarem.

Resumindo, quanto mais imagens e scripts seu blog tiver, mais demorado será o carregamento.

Dica: Se você usa o Firefox, utilize o Firebug para verificar o seu blog.

Cuidado com o tamanho da tela!

Com o lançamento de monitores widescreen e monitores com mais de 17", a visualização das páginas da web ficaram diferentes.

Se você usa um monitor de 22" com resolução 1600x1200 e o seu visitante usa um monitor de 15" com resolução de 1024x768, o que seria o certo? E como ficariam os monitores Widescreen?

A resolução mais usada atualmente é 1024px x 768px, independente do crescimento das vendas dos monitores widescreen. Mas para piorar, a venda dos “netbooks” vem aumentando e estes usam resolução 800x600.

Dicas: Faça o seu template com 780px a 1000px de largura e lembre-se de centralizar a página, para que os visitantes que usam monitores widescreen vejam a sua página corretamente.

Cuidado com a compatibilidade entre navegadores!

Com o Internet Explorer perdendo espaço para o Firefox e agora, para o Chrome, fica ainda mais difícil fazer um template compatível com todos os navegadores. Então, quando for fazer o seu template, estude, procure problemas de compatibilidade e tente fazer um template compatível com todos os navegadores, afinal, colocar “Esse blog é melhor visualizado no Firefox” é coisa de preguiçoso...

Dica: Use o BrowserShots para ver como fica seu template em outros navegadores e resoluções.

Cuidado com os anúncios!

Bem, por último, mas não menos importantes, estão os anúncios. Estes, que garantem a nossa vida como blogueiros (ou não), podem atrapalhar a navegação e, por alguns, podem ser vistos como vírus. Então, cuidado com o local que você irá colocar os anúncios, porque eles podem estragar o layout.

Anúncios misturados ao conteúdo do blog para serem confundidos com links internos são uma maneira muito apelativa de ganhar dinheiro. Não faça isso. Deixe claro aos visitantes para que servem os seus anúncios.

Mais chatos que os anúncios em locais inapropriados, são os anúncios em forma de pop-up e pop-under, que são aquelas janelinhas que abrem quando se carrega uma página. Mesmo sendo uma maneira mais fácil de ganhar dinheiro, é uma coisa que faz seus visitantes nunca mais voltarem.

Aproveite e veja como ficariam os blogs famosos sem publicidade.

Bem, essas foram as dicas. Dúvidas, críticas e sugestões, deixe nos comentários.

[...]
Leia o Texto Completo »

Trocando títulos da sidebar do Blogger por imagens

| 37 Comentários

Nesse meu primeiro post do mês de junho, iremos aprender a colocar imagens como título da sidebar do Blogger, como no meu blog ClickImagens.

Para isso, criarei um Widget Qualquer em um blog qualquer para que possamos começar. Vou colocar “Titulo Vagabundo” como título do Widget, para podermos identificá-lo posteriormente:

Depois de salvar o Widget, podemos vê-lo na nossa Sidebar:

E devemos também ter a imagem pronta.  Irei utilizar uma imagem ridícula de 150px x 30px:

Agora, com isso pronto, vamos ao tutorial (clique nas imagens para ampliá-las):

1 - No Blogger, vá em Editar HTML e selecione “Expandir modelos de widgets”:

2 - Cole isso antes do ]]></b:skin>:

.widget .title img{
display: block;
text-align: center;
}

3 - Aperte Ctrl+F e procure o título do widget, no meu caso, “Titulo Vagabundo”:

Encontrado o Widget, ele terá uma estrutura parecida com essa:

<b:widget id='Text2' locked='false' title='Titulo Vagabundo' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
[…]

4 - Apague o “<data:title/>” e substitua por:

<img src="http://A_URL_DE_SUA_IMAGEM"/>

Substituindo, é claro, o texto em negrito pela URL da sua imagem.

5 - Visualize para ver se está tudo certo, salve o modelo e pronto! O seu widget agora tem imagem no lugar do título. Veja como ficou a porcaria o meu:

Confesse, você achava que seria algo mais complicado, certo?

[...]
Leia o Texto Completo »