Apesar de hoje já termos muitos editores visuais na maioria dos sistemas de gerenciamento de conteúdo, qualquer pessoa pode criar e formatar suas postagens mesmo sem saber uma linha de código.
Pensando nisso eu resolvi criar esse post com alguns dos códigos HTML e CSS que eu acredito que são básicos e que todos os blogueiros (principalmente os iniciantes) precisam conhecer.
São códigos simples mas que fazem a diferença na hora de postar algo com qualidade.
Vamos ver:
Título
Por padrão seu blog já te proporciona um título em bom tamanho então você não precisa se preocupar com isso, certo? ERRADO.
Você precisa saber criar um título de forma rápida para ser anexado a alguma parte de um código, de uma postagem etc.
Para título existem 6 opções de tamanho, que são:
Código:
<h1>Título Tamanho 1</h1>
<h2>Título Tamanho 2</h2>
<h3>Título Tamanho 3</h3>
<h4>Título Tamanho 4</h4>
<h5>Título Tamanho 5</h5>
<h6>Título Tamanho 6</h6>
Exemplo
Título Tamanho 1
Título Tamanho 2
Título Tamanho 3
Título Tamanho 4
Título Tamanho 5
Título Tamanho 6
Lembre-se: os títulos no blogger tem grande relevância pois devem ser aplicados em ordem de importância para fins de SEO. Você sempre deve usar o Título 1 e 2 para cabeçalho da página e postagem, enquanto para o restante da postagem pode ser usado os título 3 ao 6.
Hiperlink
Saber fazer um link e entender como ele funciona é um dever de qualquer blogueiro, principalmente se estiver vinculando conteúdo fora do blog.
Assim seria um Link:
<a href="URL-AQUI">Título do link aqui</a>
Exemplo
Tag No Follow
Já falei um pouco sobre Follow x No Follow aqui no blog, de uma olhada para entender mais.
Essa tag "No Follow" impede a capitalização do link, não permitindo que ele ganhe força, já quando você não a coloca é um ponto a favor do seu link.
Então quando eu não quero valorizar por qualquer razão o link ou quando quero que seja dado menos atenção a ele eu uso o No Follow.
Código
<a href="URL-AQUI" rel="nofollow">Título do link aqui</a>
Exemplo
Inserir Imagens
Todo blogueiro deve saber como inserir uma imagem em uma postagem, página ou widget de forma manual. Não é tão difícil.
Código
<img src="URL-DA-IMAGEM-AQUI">
Exemplo
Vincular Imagem
Vincular a imagem é o mesmo que fazer dela um link, e isso é uma ótima forma das pessoas clicarem em conteúdo importante, para serem direcionadas para outro conteúdo, etc. Você pode combinar os códigod HTML para criar links, inserir imagens e até mesmo a tag no follow, se for preciso.
Código
<a href="URL-AQUI"><img src="URL-DA-IMAGEM-AQUI"></a>
Exemplo
Se você clicar na imagem, será direcionado para a página inicial do blog.
Fazer Listas
As Listas ajudam a organizar todo nosso conteúdo de forma facil e simples, elas trabalham como tópicos e é de facil aplicação podemndo ser Ordenadas (1,2,3...) e Não Ordenadas (feita de marcadores).
Código
<ol>
<li> lista 1</li>
<li> lista 2</li>
<li> lista 3</li>
</ol>
Exemplo
- lista 1
- lista 2
- lista 3
<ul>
<li> lista 4</li>
<li> lista 5</li>
<li> lista 6</li>
</ul>
Exemplo
- lista 4
- lista 5
- lista 6
A diferença entre as listas é a tag de abertura e fechamento – "ol" para Lista Ordenada e "ul" para Lista Não Ordenada.
Texto Básico
Textos básico bem feitos e com ênfase em algumas palavras é uma maneira muito legal. Você pode ter textos com ênfase, negrito e tachado.
Isso ajuda você expressar o que quer dizer em seus textos.
Código
<strong>NEGRITO</strong> também é possível usar <b> NEGRITO</b>
<em>ÊNFASE</em>
<strike>TACHADO</strike>
Exemplo
NEGRITO
ÊNFASE
Texto com Estilo Avançado
Também usar maneiras mais avançadas de alterar e embelezar seu texto incluindo cor, alteração de fonte e tamanho da fonte.
Código
Alterando a cor da fonte
<span style="color: #1B9B2C">alterar a cor de algumas palavras</span>
Exemplo
alterar a cor de algumas palavras
Alterando a fonte
<span style="font-family: Georgia, serif"><strong>alterando a família de fontes</strong></span>
Exemplo
alterando a família de fontes
Alterando o tamanho da fonte
<font size="5">tamanho de sua fonte</font>
Exemplo
tamanho de sua fonte
Link de E-mail
Vamos transformar o endereço de e-mail em um link para que fique mais fácil para as pessoas entrar em contato.
Código
<a href="mailto:YOU@yourinbox.com">Clique aqui para enviar um e-mail para Sábio Blogger Tutoriais</a>
Tabela com Cabeçalho
Outra maneira de manter seu conteúdo sempre bem organizado é fazer uso de tabelas.
Podem ser um pouco complicado para fazer, mais basta prestar atenção às tags que tudo dá certo. Teremos Tag de Cabeçalho da Tabela (th), Linha da Tabela (tr) e Detalhes da Tabela (td).
Código
<table>
<thead>
<tr>
<th><h5>Heading 1</h5></th>
<th><h5>Heading 2</h5></th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 3</td>
</tr>
</tbody>
</table>
Exemplo
Heading 1 |
Heading 2 |
|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 |
| Row 2, Cell 1 | Row 2, Cell 3 |
Botões
Hoje a maioria dos templates já trazem suas opções de botões, mas é muito importante que você saiba criar um.(este botão será pré definido pelo seu tema)
Código
<a href="URL-AQUI" class="button">BOTÃO</a>
Exemplo
Temos muitos outros códigos que são bastante usados na programação dos blogs para o Blogger, mais por enquanto vamos focar em aprender esses que são os mais básicos.
0 Comentários