|
CONSIDERAÇÕES INICIAIS |
Nesse tutorial, confira como adicionar um link com a função exibir e
ocultar texto nas postagens do blog, melhorando a organização do espaço do conteúdo
publicado. Esse link pode ser adicionado na forma de nome ou imagem, conforme o
exemplo abaixo.
A função de exibir e ocultar texto é essencial para esconder informações
que só devem ser reveladas quando for solicitado pelo internauta, como por
exemplo, a resposta de um questionário, o resultado de um teste de lógica, entre
outros casos. Essa função também pode ser utilizada para organizar elementos
que são relevantes para alguns internautas, mas que não são interessantes para
outros. Dessa forma, a função permite exibir um determinado conteúdo apenas
para os internautas que solicitarem a visualização por meio do clique, como por
exemplo, um sumário da postagem, um resumo de matéria, uma resolução detalhada
de cálculo matemático, entre outros casos.
Embora a função seja inicialmente utilizada para exibir e ocultar texto,
também pode ser utilizada para mostrar e ocultar outros tipos de conteúdo, como
imagens, vídeos, apresentações de slides, tabelas, entre outros.
|
COMO ADICIONAR A FUNÇÃO EXIBIR E
OCULTAR NO BLOG? |
Confira como
adicionar um link com a função exibir e ocultar texto em uma postagem do seu
blog em 08 passos:
1º Passo: acesse a página inicial do Blogger.
2º Passo: selecione o nome do seu blog.
3º Passo: acesse a página de edição da postagem desejada.
4º Passo: altere o modo de exibição do conteúdo para visualização em HTML.
Caso não apareça o nome visualização,
clique no ícone de um lápis e selecione o ícone dos sinais <>.
5º Passo: encontre o local que deseja inserir o conteúdo oculto.
6º Passo: clique no local desejado e escreva o código abaixo:
<div class="divspoiler">
<a href="javascript:void(0);" onclick="if
(this.parentNode.nextSibling.childNodes[0].style.display != '') {
this.parentNode.nextSibling.childNodes[0].style.display = ''; } else {
this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Exibir
/ Ocultar</a>
</div><div><div class="spoiler"
style="display: none;">
CONTEÚDO
</div></div>
Clique aqui para copiar o código acima.
7º Passo: substitua o trecho CONTEÚDO pelo
texto que deseja ocultar.
Dica: também
é possível personalizar o trecho Exibir
/ Ocultar.
8º Passo: por fim, clique em Atualizar
e confira o resultado diretamente no seu blog.
Dica: para
ocultar um trecho do conteúdo da postagem, após a realização do sexto passo,
selecione o código HTML do conteúdo que deseja ser ocultado e em seguida
pressione as teclas CTRL e X para recortar o conteúdo. A seguir,
retorne ao código da função exibir e ocultar, apague o trecho CONTEÚDO e no local, cole o código
recortado pressionando as teclas CTRL
e V. Dessa forma, é possível inserir
textos formatados, imagens, vídeos, tabelas, formas, entre outros tipos de
conteúdos dentro da função exibir / ocultar.
Para inserir apenas um vídeo dentro do conteúdo oculto, substitua o
trecho CONTEÚDO pelo código do vídeo
desejado. Por exemplo, para inserir um vídeo do You Tube, acesse a página do
vídeo desejado, clique em compartilhar,
depois em incorporar e em seguida,
clique em copiar. Por fim, cole o
código copiado no lugar do trecho CONTEÚDO
do código da função exibir / ocultar.
Para inserir apenas uma imagem dentro do conteúdo oculto, substitua o
trecho CONTEÚDO pelo código abaixo,
substituindo ainda o trecho URL_DA_IMAGEM
pelo URL da imagem que será ocultada.
<img border="0" src="URL_DA_IMAGEM"
/>
Clique aqui para copiar o código acima.
Se tiver dúvidas sobre como obter o URL de uma imagem, clique aqui e confira
os quinze primeiros passos do tutorial “como alterar o plano de fundo das postagens
e dos widgets do blog”.
|
FUNÇÃO EXIBIR E OCULTAR COM IMAGEM |
Para adicionar a
função exibir e ocultar texto em uma postagem do blog clicando em uma imagem,
realize o mesmo procedimento anterior, alterando apenas a partir do sexto passo:
6º Passo: clique no local desejado e escreva o código abaixo:
<div class="divspoiler">
<img src="URL_DA_IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display
!= '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else {
this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler"
style="display: none;">
CONTEÚDO
</div></div>
Clique aqui para copiar o código acima.
7º Passo: substitua o trecho URL_DA_IMAGEM
pelo URL da imagem que será exibido na função exibir e ocultar.
Se tiver dúvidas sobre como obter o URL de uma imagem, clique aqui e
confira os quinze primeiros passos do tutorial “como alterar o plano de fundo das
postagens e dos widgets do blog”.
8º Passo: substitua o trecho CONTEÚDO
pelo texto que deseja ocultar.
Dica: também
é possível personalizar o trecho Exibir
/ Ocultar.
9º Passo: por fim, clique em Atualizar
e confira o resultado diretamente no seu blog.
|
CONSIDERAÇÕES FINAIS |
Portanto, esse tutorial visou compartilhar um pouco de nossos
conhecimentos sobre a elaboração de links com a função exibir e ocultar
conteúdo no blog para organizar o espaço do conteúdo publicado.
|
TUTORIAIS RELACIONADOS |
|
Por: Santos.
Elaborado em: 27/12/2025. Publicado em: 27/12/2025. Atualizado em: 27/12/2025. Obrigado pela
sua atenção, qualquer dúvida, falha ou sugestão, deixe seu comentário ou
entre em contato conosco. |
Nenhum comentário:
Postar um comentário