Tutorial - Como ocultar texto através de imagens?

11:00

Tumblr_m4bpueb5mn1r28f9oo1_500_large

A pedido da nossa querida leitora Cah do blog Magia Teen; hoje vou ensinar-los queridos como se faz para ocultar um texto ou links numa imagem, da mesma maneira como eu fiz com meus afiliados no "Verdadeiros Amigos!"... 


Tutorial - Como ocultar texto através de imagens?

Esse tutorial é algo bem simples, é feito em um Gadget HTML/JavaScript muito usado pelos blogueiros em seus layouts, pois é dinâmico.
1°- Adicione o Gadget "HTML/JavaScript"
2° Cole o seguinte código..
<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;">
Aqui o conteúdo que queremos ocultar
</div></div>

3° Faça as seguintes alterações...
Vermelho.: Cole ali a url da sua imagem, porém peste atenção, a imagem tem que ter a largura certa para caber nos seus Gadgets.
Roxo.: Escreva aqui o que quer ocultar.

4° Salve e coloque o Gadget aonde achar melhor!...

Fim, espero que tenha gostado e que tenha sido útil à Cah, se você também quer um tutorial, é só nos pedir e faremos o mais rápido possível!...

Você também pode gostar:

Comentários
22 Comentários

22 mil comentários

  1. Gostei do tutorial, muito bom, sahuashu' nã tenho, digamos, habilidade pra essas coisas. Apesar de manjar um pouquinho de HTML... hahaha.

    Beeijos!
    Pós Florescer.

    ResponderExcluir
  2. Andy, brigada mesmo pelo tutorial!! Estava precisando desse tutorial e vc me salvou <3 Brigada. Que bom que gostou do Mega Post lá no MT :) Ah, coloquei hoje lá no Mil Layouts
    algumas fontes legais que eu achei no dafont.com. Passa lá no ML. Beijos, e mais uma vez, brigada pelo tutorial, com certeza vai me ajudar!
    Magia Teen

    ResponderExcluir
  3. Gostei! Acho que fica bem legal esse efeito, vale a pena!

    Garota de All Star

    ResponderExcluir
  4. ai amei esse tuto, vai me servir muito!
    http://blogcantinhodameninacrista.blogspot.com/

    ResponderExcluir
  5. Oie fofa, tudo bem?

    Parabéns pelo seu tutorial, achei muito bacana você ajudar a sua visitante nesse código tão maluco xD

    Nhaw, acho seu blog muito bonito, amo nerdices e gostei do post *-*

    Bjonas e fique com Deus <3

    Camilla Martins - http://sugar-dance.org

    ResponderExcluir
  6. Gostei mt do tutorial!
    http://blogmeninasdelicadas.blogspot.com.br/

    ResponderExcluir
  7. muito legal! :D Ensina como colocar as páginas do blog no topo da página(acima do banner)???

    ResponderExcluir
  8. Muito bom

    - Visite meu Blog: http://gah-principe-hype.blogspot.com/ veja as novidades bjs

    ResponderExcluir
  9. Eu estava procurando esse tutu, para meu proximo lay, já salvei o link aqui, pois vou usar ele. hihi

    http://vidaadegarotaa-vdg.blogspot.com.br/

    ResponderExcluir
  10. eu acho bem legal o efeito e pra elite de afiliados melhor ainda ja que ocupa menos espaço né? beijo
    http://kelly-club.blogspot.com.br/

    ResponderExcluir
  11. gostei desse tutorial, fico super bom né *--*

    http://garotoonerd.blogspot.com.br

    ResponderExcluir
  12. Olá Andy, gostei do tuto! Vou quardar para testar quando tiver um tempinho.
    Boa tarde pra ti.
    Bjs!


    http://baudamaryjo.blogspot.com

    ResponderExcluir
  13. Adorei o tutorial.
    http://www.vitrola3000.blogspot.com/

    ResponderExcluir
  14. O tutorial ficou muito legal e bem explicado, Adorei! Dei uma seguidinha se puder retribui viu?
    Kisses
    http://gigi-crazyblog.blogspot.com

    ResponderExcluir
  15. Gostei do tutorial, muito bem explicado. Talvez eu use no meu próximo lay =)
    Beijos mil. momamoraes.blogspot.com

    ResponderExcluir
  16. Ótimo tutorial , *-*
    Visita , segue se gostar?
    http://theworldoflena.blogspot.com.br/

    ResponderExcluir
  17. ** Te convido á participar do sorteio que está rolando no meu blog.** Ps: O prêmio é para meninas, então não deixe de participar por isso, pois se ganhar dê de presente para alguma menina. ex: irmão, amiga, mãe, prima etc.

    Beijos; @Raah_Castroo
    http://vidaadegarotaa-vdg.blogspot.com.br/2012/05/sorteio-em-parceria-com-butterfly.html

    ResponderExcluir
  18. Caramba que legal!!! Amei o tutorial,eu já tinha visto esse tipo de efeito no blog da Lola e tinha achado incrível.
    http://desconstruindoaspalavras.blogspot.com.br/

    ResponderExcluir
  19. Andy, eu fiz tudo que o tutorial mandava e o meu só fica a imagem, a escrita não fica :(

    http://pequenainocencia.blogspot.com.br

    ResponderExcluir
  20. amei teu blog *-* http://www.designmaniia.com/ to te seguindo retribui.. aceita afiliação?

    ResponderExcluir
  21. eei, adorei o tuto, mas queria saber como posso usar isso num post. Obrigada desde já :D

    ResponderExcluir

Já curtiu?

+ Lidas