Efeito Expansão

|| ||
Oi oi gente!!! Nossa que falha demos aqui não? Mas foi sem querer querendo! O problema de eu não ter postado esses dias foi que meu computador resolveu comemorar São João mais cedo, começou a estourar, isso mesmo ele queimou e perdi tudinho que estava nele, estava moderando e respondendo os comentários no tablet e no notebook. 
E uma das novas postadoras ia postar ontem mais a cabeçuda aqui esqueceu de dar ou ensinar essas ilustrações aqui do blog, mas já ensinei e talvez ela comece a postar amanhã.
E de agora em diante irei divulgar blog que estão no gadget de Destaque.
Um pequeno game para o gadget de Divulgação o primeiro que responder corretamente vai para o gadget:
Qual é a atual versão de layouts do blog?
Esse tutorial foi um pedido, não foi um pedido, mas mesmo assim vim postar aqui pra vocês. Como colocar efeito expansão nos gadgets do blog principalmente no gadget de afiliados. Quem pediu ou sugeriu foi a Amanda dona do blog Amanda Vitória.
Para visualizar o efeito clique aqui.
Antes de tudo você precisa ter todo o código do gadget e separar o que você quer que apareça ao clicar para aparecer mais. Recomendo que faça isso no bloco de notas.
Depois vá em Layout>> Adicionar um gadget>> HTML/JavaScript e coloque o código do conteúdo que vai ficar aparecendo e abaixo dele cole esse código:
<div class="divspoiler">
<img src="URL DA IMAGEM DE MAIS/MENOS" 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 QUE VOCÊ SEPAROU </div></div>
Onde está escrito URL DA IMAGEM DE MAIS/MENOS você coloca o link da imagem que ao clicar irá aparecer o resto, aqui está uma imagem:

E onde está escrito CÓDIGO QUE VOCÊ SEPAROU esse código é do conteúdo que irá aparecer ao clicar na imagem.

É só salvar e pronto!!!
Espero que tenham gostado!
Créditos: Birthday Cake