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/OcultarLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec magna justo, eu dignissim odio. Nunc aliquam laoreet diam non eleifend. Mauris vehicula, mauris vel vehicula condimentum, neque sem congue diam, nec tempor tortor erat nec massa. Duis tempus, turpis in scelerisque blandit, eros leo bibendum odio, eu faucibus turpis justo ac orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean a purus vehicula sapien viverra eleifend. Praesent et nisi massa. Duis lacinia orci ac quam posuere nec scelerisque lectus sollicitudin. Sed eget vulputate turpis. Duis cursus mollis neque quis feugiat.
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!
