Como mostrar imagens, textos e links por um tempo e depois escondê-los

3 comentários
script

Mostrando e ocultando elementos na página

Hoje, vamos ensinar uma técnica interessante para Webmasters e que poucos blogueiros conhecem. Como fazer para que um elemento apareça na página somente por um determinado período de tempo.

Muitos blogueiros tem curiosidade em sabem como fazer para que uma mensagem, imagem, logotipo link, etc.. apareça na página para o leitor e depois este mesmo conteúdo desapareça.

Este artifício é útil para criar um alerta de mensagem ou divulgação de um banner, enfim, independente dos motivos que o blogueiro irá usar essa técnica, ela é muito útil e, mesmo que você não tenha interesse em aplicar em seu blog, ainda assim é interessante conhece-la.

Isto é feito através da manipulação de um script desenvolvido para esta função. Pode ser inserido em qualquer área dentro do seu blog, desde artigos, páginas ou em Gadgets. Também é possível fazer o controle do tempo para que o conteúdo a ser mostrado seja escondido.

No tutorial abaixo você verá como é fácil a implementação e manipulação deste artificio em seu blog.

Tutorial - Inserindo e manipulando scripts para mostrar e depois ocultar elementos

Para começarmos, é necessário que você entenda que se você pretende aplicar esta técnica apenas em uma página ou gadget em específico, o script para esta função deve ser inserido dentro dos mesmos. Mas, se deseja aplicar esta técnica em várias páginas ou em outras áreas do template, o script deve ser inserido dentro do código fonte de seu blog.

Este tutorial segue ensinando-lhe a aplicar esta técnica dentro dos seus artigos. Para as outras áreas, siga o mesmo esquema:

Comece copiando o código abaixo:

<script language="JavaScript">
function fecha_banner()
{
 var banner_obj = document.getElementById('banner_popup');
 banner_obj.style.display = 'none';
}
setTimeout('fecha_banner()', 5000);
</script>

Insira dentro do modo HTML onde seu artigo está sendo criado.

Agora, copie a div de chamada desta função:

<div id="banner_popup">

Aqui o que eu quero mostrar por um período de tempo na página

</div>

Dentro do modo HTML, substitua o texto destacado em vermelho na div acima pelo elemento que você quer que desapareça. Pode ser imagem, texto ou link.

O número destacado em azul no código de script refere-se ao tempo em milissegundos em que o elemento a desaparecer ficará exposto na página.

Aconselhamos que você mantenha este número entre 5000 e 20000 para que o elemento não suma nem muito rápido, nem permaneça muito tempo na tela. Faça alguns testes antes de publicar.

Depois que o elemento sumir da página, irá aparecer novamente ao refresh na tela, pois não é utilizado nenhum tipo de script que armazene os dados em cookies.

Gostou da dica? Deixe seu comentário!

3 comentários :

  1. Nem sabe o tempo que já perdi na Internet à procura disto. Você é o meu salvador. No fim-de-semana vou experimentar :)


    ----
    Estas Coisas Acontecem
    www.acontecemcoisas.com

    ResponderExcluir
    Respostas
    1. Fico feliz que o artigo tenha sido útil, Pedro! Abraços!

      Excluir
  2. Opa, bacana esse código.
    Tem como fazer o efeito contrário?
    Esconder uma Div e depois de tantos minutos Mostrar a mesma na página?

    ResponderExcluir

O BG entrará em contato com você em até 24 horas! Para deixar seu link, escolha a opção Nome/URL. Spans ou links para pedidos de visita serão excluídos imediatamente. Para mais informações, leia a Política BG.