Personalizações úteis para Blogs

Ainda não citei aqui o quanto adoro a plataforma Blogger, admito que em alguns aspectos ela tem desvantagens e dá um pouco mais de trabalho em relação ao Wordpress, por exemplo.

Mas o fato de poder ter liberdade de personalizar praticamente todo tema, ou construir um tema da forma que imaginamos!

É simplesmente excelente.

Quando começamos a blogar, nos concentramos em muitas coisas para ter sucesso, nicho, nome do blog, conteúdo para publicar, iniciar técnicas de SEO, divulgação, entre muitas outras coisas.


Uma delas é a construção dos títulos do post, que menciono em alguns outros artigos.


No entanto, além de adicionar um bom título à sua postagem, você também precisa organizá-los em sua ordem de importância. 

• Eles são tags de título ou de cabeçalho. 

Geralmente são confusos no modelo do Blogger, mas você pode personalizá-los para ver o título h1, h2 e h3 os mais importantes.


Nessa postagem mostrarei como personalizar as heading tags que agregam melhorias no SEO, além de destacar melhor suas tags de título.


Mostrarei  como configurar e personalizar uma página de erro para o blog, assim evitando que o usuário abandone o mesmo quando não encontrar o link que digitou ou clicou.

Também personalizaremos os links que incluímos ao longo dos artigos, para se destacarem entre o texto, chamando a atenção do leitor.

Conferindo essas  personalizações úteis.

Aqui no blog você já encontra a personalização do  como fazer uma página sitemap uma excelente personalização para você incluir no seu blog além de organizar suas postagens proporcionando ao leitor fazer uma busca nos demais artigos do blog, ajuda o Google a indexar mais rapidamente seus posts.

Você também encontra as widget de postagens relacionadas para blogger, bem organizados indicando as postagens relacionadas entre si, indica novas leituras que poderão interessar ao leitor, com várias opções para ser personalizado.

A  Importância das Heading Tags

As heading tags \ tags de cabeçalho, são usadas como divisores de conteúdo e para diferenciar títulos, subtítulos em grau de importância.

Geralmente quando personalizamos o  blog já personalizamos o título das postagens, mas quando inserimos os  títulos, subtítulos, títulos secundários, os H2, H3, H4, para não nos confundirmos (pois, troca sua ordem é muito ruim para a saúde do seu SEO), e também dar um destaque especial a cada um deles.

Aproveitando que personalizaremos as headings tags vamos checa-las também usando o SEO REVIEW TOOLS, um ótimo site para checar se estamos usando as headings tags na ordem e quantidade certa, ele é gratuito, é só digitar seu URL no campo e clicar em checar. 

As headings são o que os buscadores usam para otimizar os assuntos mais importantes, se alguma dessas marcações for pulada o buscador não entenderá o título e irá em busca da próxima heading tag.

Confira como é fácil personalizar:

Vamos ao painel do blog em tema, editar HTML abra o painel, e de um ctrl + f  aparecerá a caixa de pesquisa, digite ]]></b:skin>, acima dessa tag cole o código, verifique se está tudo certo e salve.

/*----estilos para heading tag h2-------*/.post-body h2 { color:#b0c4de; /* edite cor da fonte */font-family:crafty Girls;/*tipo da fonte*/font-size: 26px;  /* edite tamanho da fonte */}
/*----estilos para heading tag h3-------*/.post-body h3 {  color: #708090; /* edite cor da fonte */font-family:crafty girls;/*tipo de fonte*/font-size: 20px;  /* edite tamanho da fonte */}
/*----estilos para heading tag h4-------*/.post-body h4 {   color:#94a8c5; /* edite cor da fonte */font-family:crafty girls;/*tipo de fonte*/font-size: 16px;   /* edite tamanho da fonte */}

Edite o tamanho e tipo  da fonte conforme o que desejar, coloque as cores combinando com seu blog e pronto, suas headings tags estarão personalizadas.

Para escolher outra cor consulte a Tabela de cores, como usar background e grayscale  você encontrará cores variadas e seus respectivos códigos.

Segunda Personalização Importante.

Personalizando Página de Erro 404

Nada mais chato do que digitar um endereço de uma página ou no próprio blog você se deparar com aquela frase: 

Pagina não encontrada, essa é uma das personalizações muito importante para o SEO do blog, pois ajuda o visitante a se reencontrar o blog a não perder a visita, dando opções de ler outras postagens.

Então bora lá, no painel do blog vá em configurações, preferencias de pesquisa, está lá erros e redirecionamentos, página não encontrada, abra a caixa editar e cole o código abaixa, teste digitando uma página que não exista em seu blog.

<div id="page">
<h1>

Página não encontrada</h1>

Pedimos desculpa, mas a página que acessou não está mais disponível! Poderá ter sido removida ou alterada.

Já verificou na barra de endereço do seu browser de internet se o URL está correto?.
Se estiver tudo OK, por que não tentar fazer uma pesquisa em nosso site pelo conteúdo que está procurando?
Se não encontrar aquilo que deseja, recomendamos-lhe também alguns dos nossos artigos diversos:

<ul>

<li><a href="LINK DA PÁGINA">TÍTULO DA Página</a></li>

<li><a href="LINK DA PÁGINA">TÍTULO DA PÁGINA</a></li>

<li><a href="LINK DA PÁGINA">TÍTULO DA PÁGINA</a></li>

<li><a href="LINK DA PÁGINA">TÍTULO DA PÁGINA</a></li>

</ul>

Se desejar, poderá também saltar para a nossa <a href="PÁGINA INICIAL">home page</a> ou <a href="http:/SEU BLOG/archives">navegar em nossos arquivos</a>

Se desejar reportar esse erro, <a href="mailto:SEU E-MAIL AQUI">contate-nos</a>, para  podermos resolver. Obrigado!</div><span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space: normal;">

</span></span>

Tomando cuidado para não apagar nenhum dos caracteres de funcionamento.
Você pode trocar a mensagem, depois coloque o link para as páginas do seu blog que considerar mais relevante e seus títulos, depois o link da página inicial  e o de arquivo do blog, por último não se esqueça de incluir o seu e-mail para contato.

• O código está bem explicadinho, não tem erro.

• Nossa terceira personalização e muito interessante

Personalizar os links do Blog

• Então vamos ao código, que deve ser acima de ]]></b:skin>:

a:link {

color: #ff7fb2;     /* -------- COR DO LINK ----------*/

text-decoration: none;

-webkit-transition: color 0.7s ease-out;-moz-transition:

color 0.7s ease-out;transition: color 0.7s ease-out;

}

a:visited {

color: #ff7fb2;   /*------ COR DOS LINKS VISITADOS -----*/

text-decoration:none;

filter:alpha(opacity=100);

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

}

a:hover {

color: #FF82AB;    /*----- COR DOS LINKS AO PASSAR O MOUSE -----*/

text-decoration:underline;

filter:alpha(opacity=100);

-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;

  text-decoration:underline;

  color: $(link.hover.color);

 border-bottom: 1px dashed #FF82AB;    /*----- COR DO TRACEJADO -----*/

}

Troque as cores conforme a combinação do seu blog, desejando trocar border-bottom você encontrará mais opções em códigos HTML e CSS fáceis para aprender.

 Ufa, terminou, espero que tenham gostado e até a próxima.

Não deixem de comentar, compartilhar e dar os créditos caso repostar.