Blogger: Definições Avançadas - Parte 2 Página de Erro Personalizada

Continuando com a parte 3 da secção das Definições e no seguimento das Definições Avançadas, do meu guia para a Interface do Blogger.

A utilidade destas opções são varias e muito bem-vindas pelos utilizadores do Blogger, aproximando a plataforma do que o WordPress já oferecia em termos de SEO.

Blogger: Definições » Preferências de pesquisa:

Imagem 1

Meta tags
1. Descrição
Erros e redireccionamentos
2. Página Não Encontrada Personalizada
3. Redireccionamentos Personalizados
Motores de Indexação e Índice
4. Robots.txt personalizados
5. Etiquetas de cabeçalho de robôs personalizadas

Meta tags servem para descrever o blogue aos motores de busca e são uma parte importante em termos de SEO.

Antes do Blogger implementar esta função, a solução era colocar manualmente no HTML do blogue e mesmo assim com resultados incertos. ~X

Agora as coisas são mais fáceis e devem funcionar como pretendido sem problemas.

O primeiro passo é activar essa função, colocando uma pequena descrição do conteúdo geral do blogue (1) ou algumas palavras chave.

Exemplo: "Um Blogue sobre Fotomontagens, Desenho, Arte Digital, Tutoriais, etc..." ou "Coisas K Aprendi por Aí: Fotomontagens, Desenho, Arte Digital, Tutoriais, etc...".

Mas ATENÇÃO: existe um limite máximo de 150 Caracteres. Sugiro que utilizem um Contador de Caracteres Online para não se ultrapassar esse limite. ;)

E agora com essa opção activada nesta secção, vai aparecer mais uma opção no Editor de Artigos, que permite que se coloque também uma pequena descrição sobre o conteúdo de cada artigo (Ver Imagem), tal como fizemos para o conteúdo geral do blogue.

Infelizmente, existe uma desvantagem. Temos que editar CADA artigo publicado para personalizar isso, o que em blogues com muitos artigos pode ser trabalhoso embora em termos de SEO, o resultado vai recompensar. 8)
...Ou... podemos utilizar algumas condicionais para que os artigos mais antigos (publicados antes de activarmos esta opção), também tenham algum tipo de Meta tag.
Para isso vamos a Modelo » Editar HTML e logo após <b:include data='blog' name='all-head-content'/>, colocamos o seguinte:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.metaDescription'>
<b:else/>
<meta expr:content='data:blog.title : data:blog.pageName' name='description'/>
</b:if>
</b:if>

Basicamente, dizemos aos robots da Net que, se não for a página inicial do blogue e caso não exista a Meta tag por definição, para utilizar o nome do blogue + nome (titulo) do artigo como sendo a Meta tag que descreve o dito cujo.

Claro que para isto resultar é absolutamente necessário que cada artigo (post) tenha um titulo. :D

Erros e redireccionamentos tem duas opções que considero serem muito úteis:

» Personalizar uma pagina de Erro 404 (2), que basicamente significa a página que aparece quando alguém clica numa ligação para uma página eliminada do blogue ou escrevem mal o endereço no navegador.

Antes do Blogger implementar estas funções, visitante era redireccionado para uma página de erro padrão do Blogger que não era muito atraente e a que não tínhamos acesso para personalizar.

Agora isso mudou e o visitante ao entrar no blogue para uma página inexistente vê uma página como esta, mas com um limite máximo de 10.000 caracteres, podemos criar uma página de erro 404 um pouco melhor. »:

Sugiro que criem a vossa página de erro num blogue de testes para poderem ir pré-visualizando como vai ficando.

ATENÇÃO que os códigos apresentados são somente para exemplo, cada um deve criar a sua página como achar melhor com o tema do respectivo blogue!

O primeiro passo é colocar algum código HTML (e se quisermos, um pouco de javascript) no espaço disponível em Página Não Encontrada Personalizada(2):

<div id="erro404">
<span class="ups">Doh!</span><br> <span class="comeu">Parece que o meu cão comeu a página que procuras.</span><br>
<span class="texto">Mas já que estás aqui, podes:<br>
<ul>
<li><a title="Arquivos" href="URL_PAGINA_ARQUIVOS">Procurar nos nossos arquivos</a>.</li>
<li><a title="Página Inicial" href="URL_PAGINA_INICIAL">Ir para a Página Inicial</a>.</li>
<li><a title="Regressar ao Local Anterior" href="javascript:history.back(1)">Regressar onde estavas</a>.</li>
<li>Pesquisar o que procuras abaixo:</li>
</ul>
<form class="formulariodemo cf" action='http://NOME_DO_BLOGUE.blogspot.com/search' method='get'>
<input type="text" placeholder="digitar texto ..." required name="q" >
<button type="submit">Pesquisar</button>
</form>
</span>
</div>

Nota: O formulário de pesquisa apresentado no exemplo foi retirado do artigo Un formulario de búsqueda estilizado no blogue Vagabundia.

E utilizando uma nova condicional (linhas 1 e 152 no código abaixo) que o Blogger criou junto com esta novidade, podemos dar os estilos no CSS.

Podíamos colocar estes estilos incluídos no código HTML como alguns blogues de dicas demonstram, mas como existe o tal limite máximo de 10.000 caracteres e de qualquer modo eu prefiro SEMPRE colocar os estilos CSS à parte.

Então, vamos a Editar HTML como mostrado no meu guia (imagem 9, item 2) e logo ABAIXO de ]]></b:skin>, colocamos o seguinte:

Ver Código

---

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">
#erro404 {
background: url(URL_DA_IMAGEM_DE_FUNDO);
-moz-background-size: 99%;
-o-background-size: 99%;
-webkit-background-size: 99%;
background-size: 99%;
background-repeat: no-repeat;
display:inline-block;
width:100%;
height:100%;
margin: 0;
padding:0;
}
#erro404 .ups {
font-family: impact;
font-variant: small-caps;
font-weight:bold;
font-size:80px;
text-align:center;
color:red;
text-shadow: -1px -1px 1px yellow;
display:block;
margin-top:-30px;
}
#erro404 .comeu {
font-family: sans-serif;
font-variant: small-caps;
font-weight:bold;
font-size:20px;
text-align:center;
color:aqua;
text-shadow: -1px 1px 30px snow;
display:block;
margin-top:-40px;
}
#erro404 .texto {
background-color: rgba(0,0,0,.5);
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
display:block;
padding: 10px;
margin: 10px;
font-family: sans-serif;
text-shadow: 1px 1px 1px Blue;
color:antiqueWhite;
font-size:15px;
margin-top:300px;
}
#erro404 .texto li,#erro404 .texto li a{
color:yellow;
text-shadow: 1px 1px 20px white;
}
#erro404 .texto li a:hover,#erro404 .texto li a:visited,#erro404 .texto li a:active{
color:yellow;
text-shadow: 1px 1px 20px skyBlue;
}
#erro404 .cf:before, .cf:after {
content:"";
display:table;
}
#erro404 .cf:after {
clear:both; 
}
#erro404 .cf { 
zoom:1; 
}
#erro404 .formulariodemo {
background-color: #303941;
border-radius: 10px;
box-shadow: 0 0 2px #606971 inset;
margin: 0 auto;
padding: 15px;
width: 450px;
}
#erro404 .formulariodemo input {
background-color: #EEE;
border: none;
border-radius: 3px 0 0 3px;
float: left;
font-family: Tahoma;font-size:15px;font-weight: bold;
height: 20px;
padding: 10px 5px;
width: 330px;
}
#erro404   .formulariodemo input:focus {
outline: 0;
background: #FFF;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
#erro404 .formulariodemo input:-moz-placeholder { 
color: #999; 
font-weight: normal; 
font-style: italic; 
}
#erro404 .formulariodemo input::-webkit-input-placeholder { 
color: #999; 
font-weight: normal; 
font-style: italic; 
}
#erro404 .formulariodemo input:-ms-input-placeholder { 
color: #999; 
font-weight: normal; 
font-style: italic; 
}
#erro404 .formulariodemo input:required { 
box-shadow: none; 
}
#erro404 .formulariodemo button {
background-color: #9099A1;
border: none;
border-radius: 0 3px 3px 0;
color: #FFF;
cursor: pointer;
float: right;
font-family: Tahoma;
font-size: 15px;
font-weight: bold;
height: 40px;
overflow: visible;
padding: 0;
position: relative;
text-transform: uppercase;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
width: 110px;
}
#erro404 .formulariodemo button:hover{
background: #E54040; 
} 
#erro404 .formulariodemo button:active, .formulariodemo button:focus{ 
background: #C42F2F; 
}
#erro404 .formulariodemo button:before {
content: "";
border-color: transparent #9099A1 transparent;
border-style: solid solid solid none;
border-width: 8px 8px 8px 0;
left: -6px;
position: absolute;
top: 12px;
}
#erro404 .formulariodemo button:hover:before {
border-right-color: #E54040; 
}
#erro404 .formulariodemo button:focus:before { 
border-right-color: #C42F2F; 
}  
</style>
</b:if>

Ocultar Código

O CSS acima refere-se somente ao conteúdo do código HTML para colocar em Página Não Encontrada Personalizada(2), mas podemos ir mais longe e ainda retirar a navegação, a barra lateral, o cabeçalho, aumentar larguras, etc... enfim, a imaginação é o limite. :V:

Podem clicar aqui para ver como ficou a minha página de erro 404: Erro 404. :)

Uma ultima nota sobre a página 404 personalizada, se por acaso não aparecer no vosso blogue procurem pelo seguinte código no HTML do blogue e verifiquem se aparece a linha 3 como demonstrado abaixo:

<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/> 
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.isDateStart'>
...

Essa linha faz com que apareça aquela mensagem quando navegamos pelas etiquetas que diz "Mostrando mensagens com a etiqueta tal..." e alguns templates personalizados podem ter retirado, mas agora é também essa linha de código que faz funcionar a pagina de erro 404.

Por hoje fico por aqui (Não gosto de escrever ou ler artigos muito extensos =D), amanhã termino esta série de artigos originalmente publicada no Mocheco Marafado. :D

Até Breve. :-F

Queres ler outro artigo ao calhas?