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> 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> 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:
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:<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>
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:
Se você quiser colocar mais afiliados, cole depois do nome do afiliado esse código:<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>
</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 AFILIADOE pronto, é só ajustar as cores (aqui tem uma tabela)
E se você quiser, aqui tem umas imagens de afiliados feitas por mim.
Curtiram? Comentem!
Como se faz para ficar com aqueles corações no modelo 2?
ResponderExcluirObrigado!!! Ajudou muito ♥
ResponderExcluirObrigada esse foi o unico tutorial que me ajudou!!!
ResponderExcluirVisita? http://docebunny.blogspot.com.br/
Tem como diminuir a o espaço que fica entre as imagens ?
ResponderExcluiri-n-the-clouds.blogspot.com.br