♦ Tutorial ~ Mostrar/Ocultar Conteúdo com Imagem

Linda imagem, se for de algum anime me avisa.
 Hei pessoas coloridas
 Byel Af surge de outro mundo com uma caixa dourada que chama a atenção dos leitores "Mas o que é isso???" diz um leitor "Deve ser muito legal" retruca outro.
 Então eu abro a caixa, e mostro que lá dentro está um tutorial que dividirei com todos. "Pensei que era algo mais importante" disse um leitor troll.
 Depois de tudo isso quero logo trazer o tutorial de Mostrar/Ocultar conteúdo, mas você se pergunta.
 O que é isso???
 Aqui um exemplo:


  Funciona desse jeito da imagem, primeiro é só uma imagem e quanto você clica o conteúdo que você quiser aparece, na imagem são afiliados. Mas você pode colocar banners de parceria, sorteios, divulgação...
 Então vamos aprender???


No painel do seu blog vá em:

LAYOUT  ADICIONAR UM GADGET  HTML/JavaScript

E cole isto

<div class="divspoiler">
<img src="URL DA IMAGEM QUE PARA APERTAR" 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;">
CÓDIGO OU LINKS AQUI</div></div>
 Agora é só trocar as coisas que estão marcadas e pronto.
 Nunca retire esses últimos </div></div> porque são eles que fecham o código

Bye bye

9 comentários:

  1. que giro ^^ eu não sabia que isso se pudia fazer xD

    ResponderExcluir
  2. Que legal amore ^^)
    mas me tira uma duvida este codigo é so para
    a imegem do clique e veja mais?
    ou se eu inserir os códigos do afiliados
    não havera problema?
    eu já te disse sou uma Baka
    para estas coisas!!
    mas sorte a minha ter gente para ajudar
    com estas megas dicas ^^)

    Mil Kissus
    amore

    ResponderExcluir
  3. tutorial bem legal, estava mesmo querendo saber...

    eu vi seus post Pedidos da Vivi-chan (arigatõ mais uma vez Byel >.<) e eu fiz um post aí sobre esse blog ^^
    http://bvii.blogspot.com.br/2012/08/cha-cupcake-pecam-seus-pedidos.html
    kissu~
    By: Vivi-chan

    ResponderExcluir
  4. uau adorei o tutorial, esse eu nao sabia ^^
    estou seguindo seu blog amore.
    é lindo *0*

    ResponderExcluir
  5. adorei o tutorial!!!
    este blog é muito fofo!!
    aproposito acho que esta imagem do começo do post é da banda perfume
    porque vi umas imagens dessa banda desenhada em formato de animes!!
    bjs

    ResponderExcluir
  6. Foi bem útil ^^
    Amo esse blog, sempre com coisas úteis, que uso é ficam com um resultado lindo!
    Aliás, como faz essa caixinha, tipo essa do código?
    Beijus

    ResponderExcluir
  7. BYEL, SEU TUTO FOI PLAGIADO!!!!
    Por este blog:
    http://meumundo-meuestilo.blogspot.com.br/2012/12/tutorial-mostrar-e-ocultar-conteudo-com.html?showComment=1354561726289#c2545916081212459909

    Eles copiaram e não creditaram!!!

    ResponderExcluir
  8. Muito obrigada! Seu tutorial me ajudou muito. x3

    Muitos beijos,
    UsagiQUEEN~ Otome TeaTime!

    ResponderExcluir
  9. OBRIGADA, AMIGO!
    ESTAVA PROCURANDO ESSE TIPO DE TUTORIAL!
    (°з°)~chu da IsabellaTwifan do ☆☆ Recanto da Fada Alice ☆☆

    ResponderExcluir