2012-12-02

Como fazer uma elite de afiliados (3 modos)


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. 
Agora cole esse código
<center><a href="URL do blog afiliado" none;="" target="_blank" text-decoration:="" title="Nome do Afiliado"><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;" /></a></center>&nbsp
Se você quiser que a imagem comece sem opacidade e quando passar o mouse em cima, assim:
Cole esse código:
<center><a href="URL do blog afiliado" none;="" target="_blank" text-decoration:="" title="Vaga"><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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4H0B13fTW33xN_5O-21wieJmPpLrDmbKxNXsbIK4wBMZMFULww_9_AydmwOfCGaLYS2cUFP9xan5utChdM7Wq4ezNXge4HwoBtH9WtdlIYUrQOlOzqWmHFZXMQIbUjMJDSBEcxxmEJh4/s1600/we+afiliado1.png" style="opacity: 0.5;" /></a></center>&nbsp
Pronto! Aqui você pode encontrar algumas imagens de minha autoria.


Segundo modo - Afiliados de um modo organizado 

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:

<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>
Agora, pare conseguir o código dos links, deixe a janela aonde você está criando o gadget e vá em nova postagem 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:
<script language="JavaScript" type="text/javascript">
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 );
}
}
</script>
<form name="form" id="form">
<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 )">
<option />Confira todos os Afiliados
<option style="background:#fffaf0;/* cor de fundo do afiliado*/  color: #000000; /* cor da letra*/" value="LINK DO AFILIADO" />NOME DO AFILIADO
<option style="background:#ffdab9; /* cor de fundo de outro afiliado  color: #000000; " /* cor da fonte /* value="LINK DO AFILIADO" />NOME DO AFILIADO
</select>
</form>
</center>
Se você quiser colocar mais afiliados, cole depois do nome do afiliado esse código:
</center>

<option style="background:#fffaf0;/* cor de fundo do afiliado*/  color: #000000; /* cor da letra*/" value="LINK DO AFILIADO" />NOME DO AFILIADO
<option style="background:#ffdab9; /* cor de fundo de outro afiliado  color: #000000; " /* cor da fonte /* value="LINK DO AFILIADO" />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!





4 comentários:

  1. Como se faz para ficar com aqueles corações no modelo 2?

    ResponderExcluir
  2. Obrigada esse foi o unico tutorial que me ajudou!!!
    Visita? http://docebunny.blogspot.com.br/

    ResponderExcluir
  3. Tem como diminuir a o espaço que fica entre as imagens ?
    i-n-the-clouds.blogspot.com.br

    ResponderExcluir

Ooi, sinta - se a vontade para comentar, só não pode
*Xingar
*Falar mal dos outros comentários
Fora isso tudo bem, pode comentar!

Copyright © 2014 Alaska Says