Personalizando os títulos das páginas no Blogger

| 3 Comentários

Título é o que importa!Otimize seus títulos e aumente a posição nas buscas

Para um blog ter um melhor resultado nas buscas, o título da postagem importa muito. Mas, de que adianta o título da postagem ser bom, se não aparece totalmente nos resultados do Google?

Não entendeu? Entenda agora o que estou falando:

O Blogger, por padrão, coloca os títulos das páginas de postagens com o modelo:

Nome do Blog: Nome da Postagem

Mas nos resultados de buscas do Google, só aparecem os 60 primeiros caracteres do título da página, sendo o resto substituído por reticências (...). Então, se o título do seu blog é grande, o título das postagens poderão não aparecer corretamente. Vamos aprender alguns modelos de títulos para você colocar em seu blog e melhorar seus resultados nas buscas:


Modelo 1

Nesse modelo, vamos deixar igual ao SemNome ( Título da Postagem « Nome do Blog )

1: Ache o código de título no “Editar HTML” do seu blog:

 <title><data:blog.pageTitle/></title>

2: Substitua por:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <title><data:blog.title/></title>
 <b:else/>
 <title><data:blog.pageName/> &#171; <data:blog.title/></title>
 </b:if>

3: Salve e Pronto!

Obs.: Você pode substituir &#171; por qualquer outro caractere que você quiser.


Modelo 2

Esse modelo personaliza também páginas de Arquivo do Blog:

1: Ache o código de título no “Editar HTML” do seu blog:

 <title><data:blog.pageTitle/></title>

2: Substitua essa linha por:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title><data:blog.pageName/> - Arquivo - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>

3: Salve e Pronto!

Dica.: Você pode mudar a ordem dos nomes ou trocar os hífens ('-') por qualquer outro caractere


Modelo 3

Nesse modelo, aparecerá a descrição do blog no título da página inicial e aparecerá a palavra “Arquivo” nos títulos das páginas de arquivo.

1: Ache o código de título no “Editar HTML” do seu blog:

 <title><data:blog.pageTitle/></title>

2: Substitua ele por:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/> - <data:blog.description/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title><data:blog.pageName/> - Arquivo <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>

3: Salve e... Pronto!


Modelo 4

Nesse modelo, as páginas de postagens aparecem apenas com seu título. É usado no blog do Compulsivo.

1: Ache o código de título no “Editar HTML” do seu blog:

 <title><data:blog.pageTitle/></title>

2: Substitua o código original por:

    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>

3: Salve. Pronto!

Modelo 5

Esse modelo... É você quem cria: Troque as palavras adicionais do título, os caracteres que o dividem, os elementos... Aqui está uma lista dos elementos usados nos títulos das páginas do Blogger:

<data:blog.pageTitle/> - Título padrão do Blogger
<data:blog.title/> - Nome do Blog
<data:blog.pageName/> - Nome da página do Blog
<data:blog.description/> - Descrição do Blog

E os tipos de páginas (pageType) disponíveis para o Blogger:

index - Páginas de Índice (inicial, busca...)
archive - Páginas de Arquivo
item - Páginas de postagens

[...]
Leia o Texto Completo »

Reduzindo o tempo de carregamento do blog

| 3 Comentários

Tempo é Dinheiro!Porque tempo pode ser Dinheiro!

Qual o tamanho, em KB (Kilobytes), da página inicial do seu blog? Quanto tempo um novo visitante espera para ver o conteúdo do seu blog? No post “Medindo o tempo de carregamento do seu blog” eu já ensinei como saber as respostas dessas perguntas, só que não ensinei como otimizar o template do blog. E é isso que iremos aprender agora.

Seu blog precisa ser otimizado? Você ainda acha que seu blog carrega rápido?
Ao analisar o tamanho do seu blog e o tempo de carregamento em várias velocidades de conexão, lembre-se que não são todos que usam conexões de 12Mbps, muitos ainda usam conexões inferiores a 150Kbps. Sendo assim, se seu blog demora mais de 1 minuto para carregar em uma velocidade de conexão razoável, seu blog é muito pesado.

Outro ponto importante que deve ser lembrado é que, mesmo que seu blog carregue rápido em seu navegador, poderá não carregar tão rápido no navegador do visitante: as imagens do seu blog já estão salvas nos arquivos temporários (cache) do seu navegador, mas não estão no do visitante do blog. Experimente abrir seu blog em outro navegador (que você nunca tenha visitado seu blog) ou limpar os arquivos temporários do seu navegador e depois visitar o seu blog: se demorou, precisa urgentemente de otimização!

Depois de muita explicação, vamos às dicas!

1 - Exclua os scripts em excesso

Widgets personalizados, efeitos em páginas, hacks, novas funcionalidades: Tudo isso aumenta o tempo de carregamento do seu blog. Em alguns computadores menos ‘potentes’, podem chegar a travar o navegador.

Para resolver, analise o que é realmente necessário para o seu blog e exclua os scripts/widgets que não têm quase nenhuma utilidade. Não é necessário excluir todos os scripts. Exclua apenas os que não representam nenhum nível de importância para o seu blog.

2 - Utilize menos imagens no template

Se o seu template utiliza muitas imagens de fundo, tente remover algumas e preencher com cores sólidas, pois as cores não precisam ser baixadas: as imagens, sim.
Prefira o fundo da página (‘background do body’, para quem preferir) com uma cor só, ou com imagens pequenas que se repitam.
Caso você não possa fazer isso, tente escolher (ou fazer) outro template para seu blog. Ou então tente a próxima dica.

3 - Troque as imagens PNG por GIF

As imagens PNG são melhores de trabalhar, pois a transparência é total; os GIFs têm transparência, mas esta não é total: uma sobreposição entre cor e transparência não aparecerá, será preenchida uma cor nesse local (Matte).
O formato GIF é mais rápido de carregar, por ser mais leve. E se dá muito bem com fundos de cores sólidas (da mesma cor do Matte). Então, quando for aplicável, utilize imagens GIF ao invés de PNG ou JPEG.

4 - Otimize seu CSS

Você pode reduzir o CSS do seu blog excluindo as quebras de linha em excesso, transformando, por exemplo:

body{
text-align:center;
background:#000000;
margin:0;
}
.post-body{
color:#000000;
background:#FFFFFF;
text-align:left;
}

Em:

body{text-align:center;background:#000000;margin:0;}
.post-body{color:#000000;background:#FFFFFF;text-align:left;}

Isso reduziria um pouco do tempo de carregamento do blog. Siga outra dica no artigo do Compulsivo: Otimização e compressão do CSS no Blogger

5 - Hospede seu CSS em outro local

Quando alguém visita seu blog, o navegador carrega todo o conteúdo do HTML e os arquivos externos. O HTML é carregado toda vez que se entra no blog; os arquivos hospedados externamente (imagens,CSS e scripts) são carregados apenas na primeira visita.

 No Blogger, o CSS fica dentro do código HTML e é carregado toda vez que o visitante entra. Em um arquivo externo, o CSS só será baixado uma vez e, toda vez que o visitante entrar novamente, o CSS já estará carregado, ou seja: seu blog aparecerá mais rápido.

Veja como Hospedar CSS e colocar no Blogger.

Bem, essas foram as dicas de hoje. Então, mãos à obra e reduza o tempo de carregamento de seu blog!

[...]
Leia o Texto Completo »

Usando CSS externo no Blogger

| 2 Comentários

Blogger e CSS

Para reduzir o tamanho de carregamento do seu blog, um passo importante é usar o CSS em um arquivo separado do HTML total do blog.

Mas por quê?

Digamos que um visitante entra no seu blog pela primeira vez: seu blog demorará certo tempo para carregar. Se ele entra pela segunda vez, as imagens já estarão carregadas, mas o HTML é carregado novamente.
No Blogger, o CSS é integrado no HTML. Ou seja: toda vez que o visitante entra, tem que carregar o CSS. Mas, se for hospedado externamente, só será carregado uma vez, como as imagens.

Prós e contras

Se você não fica sempre mudando o seu template, é uma ótima escolha. Mas se você é daqueles que não conseguem deixar o esquema de cores do seu blog em paz, é melhor você nem seguir essas dicas.

Antes de começar, lembre-se: após fazer isso, não será possível mudar o esquema de cores pelo Painel do Blogger (Layout -> Fontes e cores).

Sem mais enrolação, vamos ao tutorial:

> Hospedando CSS e colocando no Blogger

1 - Faça todas as modificações de cores necessárias antes de começar. Também faça um backup do seu template.
2 - Entre em seu blog e vá em “Exibir -> Código Fonte” (ou aperte Ctrl+U, exceto no IE). Aparecerá algo assim (varia de acordo com o template):

3 - Copie o conteúdo depois de:

Copie o que estiver depois da seleçãoInício do CSS - Clique para ampliar

E antes de:

Copie até antes dissoFim do CSS - Clique para ampliar

4 - Abra o bloco de notas e cole o código copiado

5 - Em “Arquivo -> Salvar como”, selecione “Tipo” como “Todos os arquivos (*.*)” e nomeie o arquivo como style.css (ou qualquer outro nome, só não esqueça do ‘.css’ no fim do nome)

Salvando o ArquivoSalvando o CSS pelo Bloco de Notas - Clique para Ampliar

6 - Vá no FileDen e crie uma conta. Lembre-se de abrir sua caixa de e-mails e clicar no link de confirmação.

7 - Após ter sua conta confirmada, clique em “Upload” e envie o arquivo criado.

Fazendo o UploadFazendo o Upload

8 - Após concluir o envio, selecione a opção “Direct URLS” e copie a URL:

URL do CSSCopiando a URL direta do CSS

9 - Vá até a parte de edição de HTML do Blogger e exclua do <b:skin> ao </b:skin>

10 - Coloque isso no local do que você excluiu:

<link href='URLDOSEUARQUIVO' rel='stylesheet' type='text/css' />
<b:skin><![CDATA[ ]]></b:skin>

Lembre-se de trocar URLDOSEUARQUIVO pela URL que você copiou do FileDen

11 - Visualize para ver se está tudo certo e salve. Se deu errado, tente começar de novo, pois  você fez algo errado.


Observação:
O FileDen tem um limite de tráfego mensal de 5GB. Isso significa que, se você hospedar apenas um arquivo CSS de 10KB, você terá o suficiente para um blog de 15.000 visitas diárias.

[...]
Leia o Texto Completo »

Novidades no SemNome 2.0

| Nenhum Comentário

SemNome 2.0Ainda SemNome, mas Feliz!

Desde sábado (05/12/2009), o SemNome está com um novo template. Mas por quê? O outro já não estava bom? O que tem de mais nesse novo template?

Creio que devo todas essas explicações e mais algumas boas notícias a vocês, leitores, que fazem o SemNome crescer.


Por quê?

O motivo principal do novo template foi velocidade. O ‘template de 1 ano’ estava demorando demais para carregar, o que fazia os visitantes impacientes saírem sem nem ler o que procuravam.

O esquema de cores foi modificado para tons de cinza, pois nunca gostei de templates coloridos. Também mudei o logo, pois o outro logo estava ultrapassado e malfeito (o outro tinha sido feito às pressas).

O que tem de mais nesse novo template?

Esse novo template utiliza CSS externo, ou seja: só é carregado uma vez. Então, o tempo de carregamento para leitores (quem lê mais de uma página) foi reduzido drasticamente, garantindo a volta dos mesmos.

Juntamente com o template 2.0, o SemNome ganhou algumas coisas novas: Termos de Uso, Política de Privacidade, uma página com todas as opções para seguir o blog e uma Política de Parcerias, afinal todos os blogueiros que querem algo com seus blogs devem definir regras (ainda mais se você usa Adsense, que exige uma Política de Privacidade).


E agora, o que o leitor ganha?

É, leitor... Você deve estar se perguntando: “E eu com isso?”, então vamos à parte boa: estou de férias! (Agora sim você ficou se perguntando o que você tem a ver com isso)
E, com o autor de férias, o SemNome será atualizado frequentemente. Então, se você quer conteúdo, é o que você terá!

Mas como vocês devem saber, escrever um artigo não é algo fácil e nem rápido. Então, tentarei seguir a rotina de 1 postagem por dia. Continuem acompanhando o blog, porque a partir de amanhã o SemNome iniciará uma rotina de postagens frequentes!

Bem, leitores, por hoje é só. Amanhã eu retorno com algo realmente útil para vocês!

[...]
Leia o Texto Completo »