30 de mai de 2014

Exibir/Ocultar partes de um post

Facilite a vida do leitor do seu blog com esse recurso simples
Como vocês podem ver no post com as dicas para aproveitar o seu pendrive ao máximo, eu utilizei um recurso bem interessante, para Exibir/Ocultar partes de um post. E como o caro leitor, André Souto me pediu, estou postando um tutorial de como utilizar esse recurso. Esta dica, bem simples de ser usada, permite ocultar partes de um post e mostrá-las quando o leitor quiser. Podem-se esconder textos, imagens, vídeos e serve para diminuir o tamanho do post quando temos algo muito extenso dentro do artigo. Veja uns exemplos abaixo:
[+/-] Mostrar/Ocultar

[+/-] Mostrar/Ocultar

Para que possa fazer o mesmo no seu blog, tem que seguir os passos abaixo. Em primeiro lugar vamos mexer no código HTML do seu template para adicionar JavaScript.
1. Adicionando o <script>
1.1. Acesse o Painel do Blogger > Modelo (Design, pra quem usa a interface antiga do blogger) > Editar HTML; ATENÇÃO: Faça o backup do seu modelo atual, para o caso de ter algum problema.

1.2. Procure pelo seguinte trecho:

</head>

1.3. Acima do trecho anterior cole o código abaixo:

<!-- Prototype y Scriptaculous--> <script src='http://www.google.com/jsapi'/> <script> google.load("prototype","1.6.0.3"); google.load("scriptaculous", "1.8.2"); </script> <!-- Prototype y Scriptaculous-->
Se você já utilizou o código JavasScript acima, em outros tutoriais (Mostrar/Ocultar Gadget HTML/JavaScript e Arquivo do Blog) não volte a adicioná-lo.

1.4. Clique em Pré-Visualizar/Visualizar, se tudo estiver no seu devido lugar, clique em Guardar/Salvar Modelo.

2. Utilizando o <script>
Agora sempre que quiser utilizar este recurso nos seus artigos, adicione o seguinte código: <a onclick="Effect.toggle("expandir1","slide"); return false" href="#">[+/-] Mostrar/Ocultar</a> <div style='display: none;' id='expandir1'><p>CÓDIGO A OCULTAR!</p></div> NOTA: Tome em conta que deverá alterar expandir1 sempre que utilizar o hack mais de uma vez no post, por exemplo, se utilizar 2 vezes em um post, o primeiro ficará expandir1 e o segundo ficará expandir2 e assim por diante.
NOTA 2: Altere CÓDIGO A OCULTAR! pelo que deseje ocultar, seja uma imagem, um vídeo ou um texto. Qualquer elemento que tenha dentro de um artigo pode ser ocultado.
Até a próxima!

a Comentários