19/12/2012

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 basta clicar no botão mais abaixo para ver.


1. Para isso vá em seu Layout, depois crie um Gadget de HTML e dentro dele você cola o seguinte código:

Códigos
<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.


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

Códigos
<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. Anônimo28/7/13

    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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345