Escrevendo comandos em formato texto (em html)

Resolvi escrever esse post enquanto escrevia sobre o resumo de post expansível (um dos últimos assuntos que postei por aqui). Naquele texto eu precisei publicar vários códigos em html, a linguagem usada para criar essa página em que escrevendo agora.

O problema é que a página do blog é escrita em html, por isso sempre que você coloca algum comando ele automaticamente interpreta. Por exemplo, quando escrevo <b>exemplo</b> o blog interpreta como texto em negrito e exibe exemplo. Quando você quer escrever comando na forma de texto são necessários alguns artifícios.

Um deles é substituir é os caracteres especiais - letras reservadas na linguagem html para serem usadas em comandos - pelos respectivos caracteres de escape (conhecidos como charactere entitie, ou apenas entitie). Os caracteres de escape são uma forma codificado, criada na linguagem html para que o browser renderize o símbolo desejado.

Por exemplo, para escrever <b>exemplo</b> é preciso escrever <b>exemplo</b> em html no post. Para saber mais sobre entities acesse os links que destaco logo abaixo.

LINKS
Revolução.etc - para quem procura mais informações sobre caracteres especiais, character entities, NCR (Numeric Character References ou referência numérica de caracteres), ampersand, entre outros

XHTML Character Entity Reference - site que contém uma lista de entities de caracteres permitidos no XHTML. Basta passar o mouse sobre o símbolo para ver a entitie respectiva.

Nachspielzeit - exemplos de tags permitidas no html

Conversor automático de <> - site hospedado pela Stanford University que cria converte aspas em entities de forma rápida e prática

Clique aqui para ler o texto completo.

Resumo de post expansível : Update

No post sobre resumos expansíveis eu expliquei como usar a ferramenta no seu Blogger, mas as mudanças tinham um efeito colateral: em todos os posts do blog, mesmo os publicados antes da alteração, aparecia o texto Clique aqui para ler o texto completo no final do texto.

Agora achei uma solução e atualizei o tutorial! Se você leu a primeira versão, confira agora o passo 6 e seja feliz!

Clique aqui para abrir o post original.

Clique aqui para ler o texto completo.

Resumo de post expansível

Desde que escrevo no Beira Mar venho alterando alguns detalhes visuais do site para agradar mais aos nossos olhos - os meus e os seus -. Foram modificações sutis, como nova diagramação ou alteração de alguns menus laterais do blog.

Ja faz um tempo que quero implantar por aqui os resumos de post expansível ou expandable post summaries. Alguns podem não saber o que é, mas a maioria ja clicou em um! Com essa ferramenta podemos exibir algumas das primeiras linhas do post na página principal do blog e colocar um link para que o leitor possa abrir o post completo, caso tenha interesse. Assim o blog fica menos poluído e a navegação não fica prejudicada pelos textos mais longos.

Criei dois exemplos para explicar melhor essa ferramenta:

1. Nesse todo o texto do post é exibido na página principal do blog (click aqui)
2. Agora apenas o começo do texto do post é exibido na página principal do blog. O texto completo aparece apenas quando você clica em Clique aqui para exibir o texto completo (click aqui).

Nesse post vou explicar de forma simples e clara como implantar essa função em seu Blogger.

Observação: Esses passos funcionam para quem usa um dos novos modelos do Blogger. Quem usa o modelo Clássico pode ter de adaptar os comandos abaixo. Nesse caso recomendo usar os links das fontes de pesquisa, no final do post, para ter mais informações.

Passo 1. Para começar, essa função precisa ser configurada no HTML do seu blog. Para editar o HTML clique em Modelo e em seguida Editar HTML. Não esqueça de habilitar a opção Expandir modelos de widgets, conforme a imagem abaixo. Antes de editar o código HTML do seu blogger recomendo que você faça uma cópia do html atual clicando em Baixar modelo completo. Caso você tenha algum problema com as alterações basta selecionar o arquivo salvo no seu computador e clicar em Fazer upload para restaurar todas as configurações.


Passo 2. Procure no código html o texto </head>. Você deve copiar e colar o código abaixo entre <]]>/b:skin> e </head>:

<!-- início do texto expansivel by rbuzelli.blogspot.com -->

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

<!-- fim do texto expansivel by rbuzelli.blogspot.com -->

Com essa primeira alteração o código html deve ficar assim:

Passo 3. Agora procure no código html o texto <data:post.body/>. Copie e cole o texto abaixo logo abaixo dele:

<!-- inicio da alteração para texto expansivel by rbuzelli.blogspot.com -->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Clique aqui para ler o texto completo.</a>
</b:if>
<!-- fim da alteração para texto expansivel by rbuzelli.blogspot.com -->

Fazendo essa alteração o texto deve ficar assim:

Observação: Nessa hora você pode fazer uma alteração! No código acima, o texto Clique aqui para ler o texto completo. é a frase que vai aparecer sempre que o seu post for publicado usando o resumo de post expansível. Caso você queira mudar essa frase basta alterar o texto! Por exemplo, você pode usar o código abaixo para usar a frase Se quiser ler mais, clique aqui!:

<!-- inicio da alteração para texto expansivel by rbuzelli.blogspot.com -->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Se quiser ler mais, clique aqui!</a>
</b:if>
<!-- fim da alteração para texto expansivel by rbuzelli.blogspot.com -->

Passo 4. Clique em SALVAR MODELO e as alterações no código estão prontas! Não foi tão difícil, foi? Agora vamos ao mais fácil, um pequeno código que precisa ser usado em cada novo post que você criar: <span class="fullpost"></span>.

Para cortar o texto dos seus post no ponto que você quer será preciso usar o código acima da seguinte forma:

Essa parte do texto eu quero exibir na página principal do meu blog.

<span class="fullpost">Ja essa parte do texto só será exibida quando a pessoa visualizar o post completo, clicando no link no final do texto.</span>.

Quem for ler o seu blog verá o texto abaixo na página principal:

Essa parte do texto eu quero exibir na página principal do meu blog.

Clique aqui para ler o texto completo.

Quando clicar no link ou entrar direto no post, ao invés de navegar em sua página principal, ele verá:

Essa parte do texto eu quero exibir na página principal do meu blog.

Ja essa parte do texto só será exibida quando a pessoa visualizar o post completo, clicando no link no final do texto

Com isso você está pronto para escrever seus posts expansíveis! Só falta agora a dica de como automatizar seus blog de forma a todos os seus próximos posts terem o código <span class="fullpost"></span> incluso.

Passo 5. Clique em Configurações, selecione Formatação e na lista de opções que você terá procure Modelo de postagem. O modelo de postagem é um campo onde podemos digitar um texto que será incluído em todos os novos posts. No campo em branco copie e cole o código abaixo:

.

<span class="fullpost">..</span>

O seu modelo de postagem deverá ficar conforme a imagem abaixo:


Agora sempre que você criar um nos post basta substituir "." pelo texto que deverá ser lido na página principal ".." pelo restante do texto.


POST ATUALIZADO
dia 09|01|09 . 08:20.12:57

Passo 6.Com os passos acima o código causa um efeito colateral no blog. O texto Clique aqui para ler o texto completo aparece no final de todos os post, mesmo os que foram publicados antes da alteração. Eu havia colocado uma observação do começo desse tutorial detalhando o problema, mas agora encontrei uma solução!

Sempre que você quiser publicar um post sem usar o resumo expansível basta adiconar no final do texto o código:

<span class="fullpost"><div></span></div>.

Para facilitar meu trabalho, atualizei meu modelo de postagem (ver o passo 5) com o código abaixo:

.

<span class="fullpost">..<div></span></div>

Dessa forma eu posso apagar o ".." quando quero escrever um texto curto e a mensagem do texto expansível não aparece. Quando quero dividir o post eu apenas apago <div></div> e substituo ".." pela segunda parte do texto.

The End

Detalhei cada parte do processo para não deixar dúvidas. Quando você for colocar em prática verá que é mais simples do que parece! Qualquer dúvida ou sugestão, basta deixar um comentário no tópico. Espero que seja tão útil pra você quanto foi pra mim!


FONTES DE PESQUISA
Minha primeira fonte de consulta foi o help do próprio Blogger (em português e em inglês). Só que as informações dele não são muito claras e só me ajudaram com as palavras chave que eu usei para pesquisar no Google. Com elas eu cheguei em dois blogs, Vento Sueste e Dummies Guide To Google Blogger Beta.

Existe uma outra opção para adaptar textos longos ao seu site: a ferramenta exibir/ocultar textos ou show/hide links , também explicada na Ajuda do Blogger. Como você pode ver aqui, apesar do bom humor de quem explicou o código ficou algumas lacunas. Tentarei escrever em os detalhes dessa outra ferramenta. Clique aqui para ler o texto completo.

Resumo de post expansível : Exemplo 2

Esse texto é um exemplo para o post resumo de post expansível.

Nesse segundo exemplo você lê apenas algumas linhas do texto na página principal do blog. O texto completo só é exibido quando você clica em Clique aqui para exibir o texto clompleto.

Clique aqui para ler o texto completo.

Resumo de post expansível : Exemplo 1

Esse texto é um exemplo para o post resumo de post expansível.

Nesse primeiro exemplo você lê todo o texto do post de uma única vez!

Clique aqui para ler o texto completo.