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.
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.
Nenhum comentário:
Postar um comentário
Você leu um artigo escrito com grande dedicação. Gostou? !
Comente, críticas e sugestões, são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Inscreva-se e receba novidades.