Se vocês estão lendo a segunda parte da nova série “Aprenda a criar um blog gratuito de qualidade”, quer dizer que agora é pra valer! Esta parte, ao contrário da anterior, poderá interessar não somente aos blogueiros novos, mas também aos veteranos. É que agora, vou dar uma boa lição de formatação de textos e imagens no WordPress, na qual será feita sobre HTML. Também vou postar algumas dicas que vão deixar seus textos mais atraentes visualmente, e que vão lhe garantir muito mais pageviews! Confira.

Esta parte será fundamental para o entendimento e a aplicação das outras, por isso, recomendo a leitura. Aqui vamos tratar de vários assuntos de edição de texto no WordPress, aqui vou ensinar você a deixar seu conteúdo mais atrativo visualmente, utilizando HTML e um pouco de CSS .

Seu primeiro passo será abrir o editor do WordPress.com, indo em Escrever.

Você irá encontrar esta página. Percebá que a parte de edição é bem complexa, mas inicialmente, vise apenas nas abas “Visual” e “HTML”. Iremos trabalhar na aba “HTML”, e para renderizar os códigos clique em “Visual”, ok? Então vamos lá!

Formatações básicas

O nosso primeiro passo será aprender as formatações básicas: Texto em negrito , itálico , riscado e sublinhado . Vamos lá? Escreva isso no seu editor do WordPress, lembre-se que ele deve estar na aba “HTML”.

<strong>Texto em negrito</strong> = Texto em negrito

<em>Texto em itálico</em> = Texto em itálico

<strike>Texto riscado</strike> = Texto riscado

<u>Texto sublinhado</u> = Texto sublinhado

Perceba que o processo foi apenas colocar o seu texto entre tags HTML. As tags tem que ser duas: uma para abrir e uma para fechar, geralmente, as tags que fecham tem um “/” antes. E outra coisa, não há limite de uso de tags num texto, então, se a gente quiser colocar <strong><em><strike><u>Texto com todas as formts. básicas</u></strike></em></strong> será válido: Texto com todas as formts. básicas.

Colorindo o texto

Quer dar mais vida ao texto? Pode fazer isso colorindo ele. E para isso, confira o código a seguir: Texto em vermelho = <span style=”color: #ff0000;”>Texto em vermelho</span>. Perceba que usamos a tag <span>, mas dentro dela inserimos o valor da cor em style=”" (Isso é CSS, mas isso já é assunto para um outro post). Observer que o código da vor é #ff0000, que está em hexadecimal. Você pode conseguir cores em hexadecimal pelo programa ColorMania .

Modificando a fonte

Quer deixar a letra de suas palvras de estilo diferente? Então você deve modificar a fonte da palavra. Cada fonte tem uma família, e no total são três famílias: serif , sans-serif e monospace .

Veja a seguir um exemplo de palavra na fonte Courier New: Este é um exemplo

O código usado foi: <span style=” font-family: Courier New,Andele Mono, monospace; “> Este é um exemplo</span>

Para você analisar o código corretamente, dividimos o mesmo em cores. Cada cor representa um categoria. A verde mostra a tag span style, que ser para inserirmos um código CSS. Logo em seguinte, damos a propriedade para inserirmos uma letra, que será font-family: e depois o valor da propriedade que será a fonte. Veja que o valor ficou como Courier New,Andele Mono, monospace;. Courier New é a letra que desejamos que a palavra fique, Andele Mono é a letra que a palvra irá ficar, se caso o computador do leitor não tenha a fonte Courier New, e monospace é a família das duas letras.

Posicionado Textos

Quer centralizar, alinha para direita ou esquerda, e justificar seu texto? Veja os códigos abaixo:

A sixtaxe do código é essa: <p style=”text-align: alinhamento ;”>Um texto alinhado</p>

Em alinhamento, substitua por: center, left, right; justify. Veja o resultado respectivamente:

Um texto centralizado

Texto na esquerda

Texto na direita

Isso é um texto, ele está no alinhamento justificado. Agora o resto é apenas para encher lingüiça, e mostrar como funciona o efeito disto. Veja que o texto ocupa todo o espaço da página. Não é legal?

Links

Com os links, a há possibilidade do leitor clicar numa palvra e ser redirecionado a um outro site. Quer aprender a fazer isso? Então veja o exemplo abaixo.

Clicando aqui você será redirecionado ao DeskMundo

O código usado foi este:

<a title=”Home Page do DeskMundo” href=”http://deskmundo.com/”>Clicando aqui você será redirecionado ao DeskMundo</a>

Vou explicar. <a é a tag que abriremos. Dentro dela tem title=”" , que contém o texto que será exibido quando alguém levar o cursor ao link e também tem href=”" , que é o campo onde deve ser inserido o URL do site. Logo após, devemos digitar o texto que deverá conter o link e fechar a tag <a>, que logcamente deverá ser feito com a tag </a>.

Bem, vamos a um outro tipo de link:

Clicando aqui você será redirecionado ao DeskMundo em uma outra janela.

O código usado foi:

<a title=”Home Page do DeskMundo” href=”http://deskmundo.com/” target=”_blank”>Clicando aqui você será redirecionado ao DeskMundo em uma outra janela.</a>

Perba que é bem semelhante ao anterior, mas a diferença é que neste tem o valor target=”_blank” , que é responsável por abrir o link em outra janela.

Listas

Quer aprender a fazer listas assim?:

• Item 1
• Item 2
• Item 3

Então, como você já está um pouco craque em HTML, confira o código abaixo:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Perceba que temos que abrir com as tags <ul>. Depois, cada item deve estar entre tags <li>.

Também tem esta lista:

1. Lista 1
2. Lista 2
3. Lista 3

Confira o código:

<ol>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ol>

Perceba que substituamos a tag<ul> pela <ol>. Por isso gerou números invés de pontos.

Citação

Imagina a citação na qual você tenha que colocar uma fala de uma pessoa. Para deferenciar do resto do texto, nada mais justo fazer uma citação. E para isso coloque o texto entre as tags<blockquote> e </blockquote>.

Veja o exemplo aqui no DeskMundo:

Depois de algum tempo você prende a diferença, a sutil diferença entre dar a mão e acorrentar uma alma. E você aprende que amar não significa apoiar-se. E que companhia nem sempre significa segurança. Começa a aprender que beijos não são contratos e que presentes não são promessas.

Começa a aceitar suas derrotas com a cabeça erguida e olhos adiante, com a graça de um adulto e não com a tristeza de uma criança.

O Mesentrel, Willian Shakespeare.

O resultado dependerá do tema do seu blog.

Bem, a parte de textos termina aqui. Agora iremos trabalhar com mídias.

Inserindo imagens

Quer aprender a adicionar uma imagem ao seu blog? Então confira a nossa dica abaixo:

A sintaxe do código é <img src=”endereço URL da imagem” alt=”texto alternativo” title=”texto para ser exibido quando o mouse for levado à imagem” border=”0″ width=”largura da imagem” height=”altura da imagem”/>

Usando esta sintaxe, apliquei esta imagem ao blog:

O código usado foi:

<img src=”http://www.news.wisc.edu/news/images/Gates_Bill_talking05_14338.jpg” alt=”Bill Gates falando com a classe” title=” Bill Gates falando com a classe” border=”0″ width=”402″ height=”267″ />

Inserindo vídeos do YouTube

É bem simples, a sintaxe do código no WordPress.com é: [youtube=URL do vídeo]

Se no seu caso, seu blog for de domínio próprio, então deve colocar o link contido no “embed” da página do YouTube ou de outro serviço de vídeo. Mas enfim, confira um exemplo que será obtido em ambas formas:

Menu de navegação

Quer fazer um menu de navegação igual ao deste post? Então veja a sintaxe do código abaixo:

<a href=”#teste”>Clicando aqui, você irá ir no texto abaixo.</a>

<a name=”teste”>Você clicou ali e parou aqui</a>

Clicando aqui, você irá ir no texto abaixo.

Você clicou ali e parou aqui

Agora, é só usar isso como base e fazer um menu usando a lição Listas .

Caixa de texto

Quer colocar uma caixa de texto para inserir algum link de banner, etc? Veja o código abaixo:

<textarea>TEXTO AQUI</textarea>

Renderizando:

Este é um texto comum no DeskMundo. Isto é apenas um teste.Este é um texto comum no DeskMundo. Isto é apenas um testeEste é um texto comum no DeskMundo. Isto é apenas um teste

Você pode personalizar a caixa de texto também, basta usar CSS. Este estilo é para blogs milimanistas:

Teste do blog, Teste do blog,Teste do blog,Teste do blog,Teste do blog,Teste do blog,

Código: <textarea style=”background-color: #000000; color: #FFFFFF; font-size: 10px; font-family: segoe ui, verdana, sans-serif; font-weight: italic”>TEXTO AQUI</textarea>

Enquete

Os blogueiros com domínio próprio usam o plugin Democracy para criar enquetes. Mas se você é do WordPress.com, e quer criar enquetes semelhantes ao do plugin, não tema! Para isso, leia este artigo feito pelo Raul do O futuro do passado.

Formulário de contato

Um formulário de contato é jeito mais simples de um leitor contatar o webmaster do blog. Aqui no DeskMundo, a nossa página de contato é powered by formulário de contato. Quer colocar no WordPress.com também? Então insira o código [contact-form 404 "Not Found"] em um post qualquer (na aba HTML) e pornto. Lembrando que os e-mails serão enviandos para o seu e-mail de cadastração do wordpress.com. Dia do Raul tamnbém

Live Preview.

Recurso “Leia o Artigo completo…”

Quando um post é enorme, nada melhor que dividi-lo, pois assim ele vai ficar normal no seu permalink, mas cortado antes do código na página inicial do blog. Para isso, utilize o código <!–more–> na parte em que você deseja cortar.

Dividindo o post em páginas

Você já deve ter visto que em alguns sites conceituados, os artigos grandes são dividos em páginas. Quer aprender a fazer isso (ambos Wordpress.com e WordPress.org)? Basta inserir o código <!–nextpage–>

Para cada <!–nextpage–> dentro do post, é igual a uma página. Então, se dentro do post tiver dois códigos <!–nextpage–>, o post será dividido em duas páginas. Concluindo, a primeira página é o que vem antes do primeiro <!–nextpage–>.

Ufaa, dias e dias escrevendo este post mas com certeza ficou ótimo. Na próxima parte (não vai demorar como esta ) irei ensinar a como personalizar seu blog! Esta parte ninguém pode perder