04 julho 2013

Gadget de Afiliados Efeito Hover


Hoje decidi postar umas imagens de afiliados que eu já tinha no meu computador.
E de bônus um código HTML para Gadget de Afiliados com Efeito Hover.
Veja abaixo um preview de como ficaria seu Gadget de Afiliados Efeito Hover





Se você quer colocar um Gadget desses no seu blog aqui abaixo segue o código.
O Código de Gadget de Afiliados não é meu. É do Blog Garotas do Contra
Edite apenas as partes em verde


<center>
<style
 type="text/css">
div.sidebar-social-gadget {text-align:center;}
div.sidebar-social-gadget img {opacity:1;-webkit-transition: all 1s
ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;transition:
 all 1s ease;}
div.sidebar-social-gadget img:hover {opacity:0,20;}
</style>
<div class="sidebar-social-gadget">
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a>
<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank"
title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM"
/></a></div>
</center>

Aqui algumas instruções:

1º Copie todo o código e vá até o Painel do Blogger e clique na opção "LAYOUT"

2º Procure a  barra lateral do seu layout e clique "Adicionar Gadget"

3º Escolha "HTML" e cole o código

4º Antes de salvar substitua as indicações em verde:  URL_DO_BLOG pelo endereço do seus parceiros
NOME_DO_BLOG e ENDEREÇO_DA_IMAGEM por suas imagens de afiliados.

E caso queira colocar mais afiliados/parceiros basta acrescentar o código abaixo antes do último </div></center>

<a href="https://www.blogger.com/URL_DO_BLOG" target="_blank" title="NOME BLOG"><img border="0" src="ENDEREÇO_DA_IMAGEM" /></a>

Abaixo algumas imagens para afiliados de diversos temas pra você utilizar:

 
Espero que esse tuto seja útil!

3 comentários:

  1. Não consegui, pode me ajudar? (é um theme q estou tentando fazer)
    http://0daydreamer.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oie, Yasmim! O que será que deu errado?
      Me comunicarei contigo em seu blog, OK?

      Excluir