Como fazer uma elite de afiliados (3 modos)
Autor: Feer | Publicado: 2012-12-02T16:36:00-02:00




Oi! Bom, eu acabei gostando de fazer tutorias, então, eu vou começar a fazer tutoriais (por isso a página goodies), mais já deixando avisado que esse não é o foco do blog.
Então vamos lá!


Primeiro modo - Afiliados com efeito hover:





É bem facinho de fazer, primeiro vá em layout, e adiciono um gadget de HTML/javascript aonde você quer que os afiliados apareçam.&nbsp;

Agora cole esse código

&lt;center&gt;&lt;a href="URL do blog afiliado" none;="" target="_blank" text-decoration:="" title="Nome do Afiliado"&gt;&lt;img class="borderimage" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="URL da imagem do afiliado" style="opacity: 0.5;" /&gt;&lt;/a&gt;&lt;/center&gt;&amp;nbsp
Se você quiser que a imagem comece sem opacidade e quando passar o mouse em cima, assim:



Cole esse código:

&lt;center&gt;&lt;a href="URL do blog afiliado" none;="" target="_blank" text-decoration:="" title="Vaga"&gt;&lt;img class="borderimage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" src="http://3.bp.blogspot.com/-kc43rvZQXwE/UCf1cJl24hI/AAAAAAAAFPA/V0WIicju53E/s1600/we+afiliado1.png" style="opacity: 0.5;" /&gt;&lt;/a&gt;&lt;/center&gt;&amp;nbsp
Pronto! Aqui você pode encontrar algumas imagens de minha autoria.



Segundo modo - Afiliados de um modo organizado&nbsp;

Esse tutorial eu achei no blog Trechy Teen



Vá na página layout, crie um novo gadget de HTML/javascript e cole esse código:




&lt;div class="divspoiler"&gt;

&lt;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';}" /&gt;

&lt;/div&gt;&lt;div&gt;&lt;div class="spoiler" style="display: none;"&gt;

Aqui o código dos links

&lt;/div&gt;&lt;/div&gt;

Agora, pare conseguir o código dos links, deixe a janela aonde você está criando o gadget e vá em nova postagem&nbsp;e escreva todos os links, agora clique em HTML e copie o código que está lá, assim:



Cole esse código aonde está escrito "aqui o código dos links"

Agora a imagem, eu fiz umas para vocês:














Terceiro modo - Menu suspenso



Ele fica mais o menos desse jeito.

Vá em layout, adicione um gadget de HTML/javascript e cole isso:


&lt;script language="JavaScript" type="text/javascript"&gt;

function openDir( form ) {

var newIndex = form.fieldname.selectedIndex;

if ( newIndex == 0 ) {

alert( "Please select a location!" );

} else {

cururl = form.fieldname.options[ newIndex ].value;

window.location.assign( cururl );

}

}

&lt;/script&gt;

&lt;form name="form" id="form"&gt;

&lt;select style="width: 100%;font-family:corbel; text-align: center; font-size: 11px; border: 2px solid #c71585 ;/* cor da borda */ font-size:13px ;/*tamanho da fonte */ background: #FFFAFD " /* cor de fundo */name="fieldname" onchange="openDir( this.form )"&gt;

&lt;option /&gt;Confira todos os Afiliados

&lt;option style="background:#fffaf0;/* cor de fundo do afiliado*/ &nbsp;color: #000000; /* cor da letra*/" value="LINK DO AFILIADO" /&gt;NOME DO AFILIADO

&lt;option style="background:#ffdab9; /* cor de fundo de outro afiliado &nbsp;color: #000000; " /* cor da fonte /* value="LINK DO AFILIADO" /&gt;NOME DO AFILIADO

&lt;/select&gt;

&lt;/form&gt;

&lt;/center&gt;

Se você quiser colocar mais afiliados, cole depois do nome do afiliado&nbsp;esse código:

&lt;/center&gt;



&lt;option style="background:#fffaf0;/* cor de fundo do afiliado*/ &nbsp;color: #000000; /* cor da letra*/" value="LINK DO AFILIADO" /&gt;NOME DO AFILIADO

&lt;option style="background:#ffdab9; /* cor de fundo de outro afiliado &nbsp;color: #000000; " /* cor da fonte /* value="LINK DO AFILIADO" /&gt;NOME DO AFILIADO
E pronto, é só ajustar as cores (aqui tem uma tabela)
E se você quiser, aqui tem umas imagens de afiliados feitas por mim.

Curtiram? Comentem!