19/12/2012

Tutorial: Afiliados Expansível (Menu de afiliados organizado)

||

Yooo meus pãozinhos de mel? Hoje trago mais um tutu para vocês meus amores, acho que vocês já devem ter visto menu de afiliados que só aparecem quando você clica na quele botãozinho escrito "Mostrar" ou "Mais/Menos"? Então é esse que vamos fazer agora! Para terem uma ideia, eu fiz no blog de teste eu coloquei com o nome de Afiliados Expansível.


Para isso vá em seu Layout, depois crie um Gadget de HTML e dentro dele você cola 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;">
CODIGO DOS LINKS
</div></div>

Agora e só colocar como se pede! Eu deixarei uma imagem de demostração para vocês! Eu acho bem legal usar esse efeito com o  Menu Pixel, assim quando a pessoa clicar ele vai aparecer como uma listinha, basta usar a imaginação.


Caso queiram usar o mesmo tutorial mas sem  da imagem, basta usar esse código colocando uma frase no lugar indicado

<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';}" >Aqui a frase</a>
</div><div><div class="spoiler" style="display: none;">
Aqui o conteúdo que fica fechado.
</div></div>

Beijokas e ate mais tarde!!!

10 comentários:

  1. que legal que fica um dia eu uso
    Raphael - Insônia Literária

    ResponderExcluir
  2. vou tentar usar ^^
    :**
    ohhip.blogspot.com

    ResponderExcluir
  3. Usa sim, vou amar ir la ver ^^

    ResponderExcluir
  4. Anônimo16/5/13

    Como faço pra usar com uma frase, invés de imagem?

    ResponderExcluir
    Respostas
    1. Yo, yo basta mudar a parte do
      <im[g] src="URL DA IMAGEM"
      por
      <a href="javascript:void(0);

      Mas para facilitar vou deixar o código já arrumadinho no final da postagem, porque nos coments não aceita enviar.

      Excluir
  5. Amei o tuto, vou usar ^^

    ResponderExcluir
  6. Não consegui usar nenhum dos dois ... ficam dando erro !
    Ajuda ?

    ResponderExcluir
    Respostas
    1. Tem certeza? Verifiquei e esta tudo certinho, quando você fez você fez transformo o código de HTML em texto? Porque pode ser isso.

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram