sábado

Tutorial - Afiliados no Blog


A pedido de um visitante/seguidor, Edwin ,do meu blog, vou fazer um tutorial de como colocar a elite de afiliados igual a minha. Este tuto é bem fácil e eu acho que fica com um efeito bem maneiro. Vamos lá?

1º- Vá em Modelo>Editar HTML, pressione Ctrl+F e pesquise por ]]></b:skin>. Acima do código pesquisado, cole:
.afiliados {
 debox-shadow: 2px 1px 3px #50A9A7;
border-radius: 40px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
}
.afiliados:hover {
transform: rotate(-360deg) scale(1) skew(0deg);
-moz-transform: rotate(-360deg) scale(1) skew(0deg);
-webkit-transform: rotate(-360deg) scale(1) skew(0deg);
-o-transform: rotate(-360deg) scale(1) skew(0deg);
}
2º- Vá em Layout>Adicionar um Gadget> HTML/Java Script e cole:
<href><a href="LINK DO BLOG" title="NOME DO BLOG"><img src="LINK DA IMAGEM" class="afiliados" /></a>
Pronto. Para ter mais ícones de afiliados, basta copiar o código acima novamente e colocar abaixo do primeiro código no mesmo gadget e editar com o LINK,NOME e IMAGEM.

Algumas imagens de afiliados que peguei nos blogs Pandas Kawaiis e Kawaii World.






            

             

      



15 comentários:

  1. Legal o tutorial. Eu já usei imagens para fazer os meus afiliados e é bem útil.
    the-paradiise.blogspot.com.br/

    ResponderExcluir
  2. Esse tutorial é muito simples e útil, principalmente pra quem ta começando na blogosfera, gostei :)
    Beijos, Djêni.

    ithe-clouds.blogspot.com

    ResponderExcluir
  3. É super demorado criar imagens para afiliados, mas quando eu me empolgo eu faço umas 50 rsrsrsr.
    Aliás adorei o tutorial e as imagens, Bob Esponja ♥.

    Sobre a pergunta lá no blog.
    Acho que a cor é #e2e2e2 ou #ededed com a opição 'sobrepor'
    Mas eu prefiro usar uma style, nesse post tem o link para download.
    http://chaecupcake.blogspot.com.br/2013/04/photoshop-borda-interna-pressionada.html

    Espero ter ajudado.
    Bye bye

    ResponderExcluir
  4. adorei as imagens! Lindas..
    Veja não vai se arrepender>>http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
  5. Gosto desse efeito, minimalista, porém bonito :)
    Beijo :*
    http://blog-part-of-me.blogspot.com/

    ResponderExcluir
  6. As imagens são bem lindinhas, e o efeito também, mas como visita o POD sabe que eu gosto de criar sozinha ^^ obrigada pelo elogio das faixinhas, não tenho um tutorial sobre isso lá no blog, mas se quiser posto amanhã ok? Obrigada pela visita volte sempre ~

    palace-of-designers.blogspot.com

    ResponderExcluir
  7. Hum Mt Bom...Visite meu Blog ^^

    http://birthdaykawaii.blogspot.com.br/

    ResponderExcluir