Segunda-feira, 15 de Outubro de 2007

Ocultando textos

Postado: na M.Cassab
Estado: falta muito para as 17h30 ?
Escutando: Angra - Mama

Fazia um bom tempo que estava experimentando novos recursos para o meu blog. Uma coisa que gostaria muito, era descobrir uma forma de ocultar postagens. Assim, poderia criar páginas de navegação, como já vi em alguns blogs.

Ainda não descobri como fazer isso, mas descobri algo tão legal quanto: como ocultar um texto na postagem. Descobri meio "sem querer" na seção de Ajuda do Blogger. É relativamente simples.

Primeiro: vá para a guia Modelo e acesse a página Editar HTML. Depois da TAG <head> você deverá colar o seguinte código em Javascript:

<script type="text/Javascript">

function expandcollapse (postid){
     whichpost = document.getElementById(postid);
     if (whichpost.className=="postshown") {
          nbsp; whichpost.className="posthidden";
     }
     else {
          nbsp; whichpost.className="postshown";
     }
}

</script>


Se você não entendeu nada, esse código será responsável por ocultar ou revelar um texto cada vez que for clicado em um link específico. Vou falar sobre isso logo mais.

Segundo: na mesma página, você deverá colar o seguinte CSS:

.posthidden {display:none}
.postshown {display:inline}


Esse CSS indicará o texto que deverá ser revelado (.posthidden) e oculto (.postshown). Caso queira formatar o texto, basta inserir novos atributos na classe .posthidden.

Agora, na hora de criar um nova postagem, se quiser ocultar um texto, basta digitá-lo entre uma TAG <span> da seguinte forma:

<span class="posthidden" id="id_texto">Texto que será ocultado</span>

O segredo desse bloco está no parâmetro class, que formatará o texto com a classe de CSS .posthidden para ocultar o bloco, e o parâmetro id, em que deverá ser indicado o nome do link que fará o bloco ser ocultado ou revelado.

Agora, crie um link para acionar a função:
<a href="javascript:expandcollapse('id_texto')">Link que revelará ou ocultará o bloco</a>

Além do texto que será exibido no link, você deverá editar o parâmetro id com o mesmo nome indicado no bloco (usei o exemplo id_texto). Assim, toda vez que você clicar nesse link o bloco aparecerá ou sumirá.

O mais legal é que, como um blog não deixa de ser uma página de internet como qualquer outra, você também pode colocar os mesmos códigos em seu site que funciona do mesmo jeito.

Já usei algumas vezes esse recurso no meu blog e gostei muito do resultado. CutuKaqui para ver [ Todos os meus textos ocultos são acionados por um link assim: [?]. Se quiser dar uma olhada, acesse a postagem sobre o Robotmaster Rijie e clique no link que tem lá para ver. ] .

Mas tome cuidado com o valor-nome-texto utilizado no parâmetro id. Não se esqueça de que na página do blog, normalmente, são agrupadas várias postagens, logo, se você utilizar o mesmo ID em todos os links, cada vez que clicar em apenas um, todos os blocos serão exibidos.

Lembre-se do que o Mestre dos Magos disse: "o destino de um chifre será compartilhado por todos".

Se todos os "chifres" tem o mesmo nome, então todos terão o mesmo destino.

Isso acontece porque o link está chamando uma função com um determinado nome (id). A função varrerá a página e executará o comando para todos os blocos (span)com o mesmo nome... logo, é bom colocar um nome diferente para cada bloco que será ocultado.

Se quiser ler mais sobre isso, acesso a página sobre Como posso criar links exibir/ocultar para as minhas postagens? na seção de Ajuda do Blogger.

Mais tarde, descobri que esse código não funciona dependendo do browser acessado. Postei um outro tutorial sobre o assunto.

6 cutukAQUI para comentar:

Claudya disse...

Muito boa a dica! Vou citar lá no Blog-Memories ok. Bjs.

Moses disse...

Tentarei agora

Rosdu disse...

Olá, qdo cheguei nessa parte eu "boiei" legal. Pode me explicar? Obrigado.
(Agora, crie um link para acionar a função:
(<<')">Link que revelará ou ocultará o bloco)

Anônimo disse...

gostei da dica vai me ajudar e muito

http://baixaketo.blogspot.com/

maxgamesiba disse...

Cara não to conseguido sera que teria como voce posta uns exemplos de como deve ficar?

Valeu

Barão disse...

Maxgamesiba,

Esse código tem um problema mesmo, não é sempre que funciona.

Por isso, havia postado um outro método. Pelo menos, funciona no Blogger:

http://cavichioli.blogspot.com/2007/11/ocultando-textos-verso-2.html