Como fazer um menu afiliados mais organizado

Oi Oi Gente!

Venho com outro tutorial super útil pro blog também que é a questão da organização nos afiliados ás vezes aquela lista imensa de afiliados além de ocupar muito espaço, deixa um pouco o Lay desorganizado, mas pra quem não tem ideia de como é esse tipo de afiliado eu vou explicar ele é uma espécie de menu suspenso que quando você clica na imagem ( Mas que imagem? Pra quem não sabe você vai ter que colocar uma) o resto dos afiliados aparecem é quase a mesma coisa de afiliados com expansão!

Veja um exemplo ( clique na imagem ) :

Primeiro você vai na sua página de Design, e cria um novo Gadget de HTML, e nele 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;">
Aqui o código dos links
</div></div>

Deixe a janela do Gadget minimizada, e crie uma postagem rascunho em seu blog, colocando nela todos os links dos seus afiliados, em seguida clique na aba editar html da postagem, copie todo código dos links e cole na parte destacada no código acima, depois você cria uma imagem do tamanho da sua coluna que seja bem atrativa copie a URL dela e cole onde tem URL DA IMAGEM feito isso salve, agora preste atenção para não apagar nenhum trecho do código, caso contrário não vai funcionar.

Se você quiser usar o tutorial para mostrar e ocultar um player basta colocar no lugar do código dos links o código do player ou vídeo.

*Totais créditos pelo tuto ao Trechy Teen*