6 de jan. de 2012

Efeito no gadget dos afiliados

6644625039_67fe78fef2_z_large
Oi, gente! Tudo bom com vocês? Hoje vou ensinar à vocês como se faz esse efeito no gadget de afiliados. É simples, fofo e pode ser usado para vários outros elementos de página. 

Vá até Design > Editar HTML, e procure (F3/Ctrl + F) por ]]></b:skin>. Acima dela, cole o seguinte código:
.afiliados {
opacity: 0.7; 
-webkit-transition: 0.5s;
border-radius:15px;
width: 50px;
height: 50px;
text-align: center;
}
.afiliados:hover {
opacity: 1.0;
}
Agora entenda:

ESTADO "NORMAL"
opacity: 0.7; Opacidade em 70%, no estado normal, sem passar o mouse.
-webkit-transition: 0.5s; Tempo da transição.
border-radius: 15px; Bordas arredondadas.
width: 50px; Largura da imagem dos afiliados.
height: 50px; Altura da imagem dos afiliados.
text-align: center; Alinhamento das imagens.

ESTADO HOVER
opacity: 1.0; Opacidade em 100% (normal), ao passar o mouse.

Agora salve, e em seguida se direcione à Design > Elementos da página. Clique em "Adicionar um Gadget", e escolha a opção HTML/Javascript. E acrescente o seguinte código:
<a href="http://URL.com" title="Título da imagem"><img src="LINK_DA_IMAGEM" class="afiliados"/></a>
Para acrescentar mais imagens, vá duplicando o código. Espero que tenha ajudado vocês! Beijos!

52 comentários:

  1. Nossa, amei! Estava procurando esse tutorial, quero mudar um pouco sabe? Obrigada pela ajuda, com certeza vai ser usado no próximo layout que não vai demorar muito não... haha.
    Amei o tutorial, obrigada mesmo Emily <3

    Fernanda Zucolotto
    meianoiteequinze.blogspot.com

    ResponderExcluir
  2. Aun
    Amei o tuto
    amo os tutos daqui
    bjs

    gpurple.blogspot.com

    ResponderExcluir
  3. Seu blog é perfeito, amei! To seguindo ^^
    O meu blog é novo, criei dia 5, poderia comentar ele e seguir? Mas claro, só se quiser :)
    Beijos e feliz 2012
    deluxegirlsblog.blogspot.com
    @DeluxeGirls

    ResponderExcluir
  4. Ótimo tutorial, Emy.
    Feliz ano novo e natal (atrasado), te desejo muita saúde, paz e felicidade. E é claro, espero que volte logo com o Place Fame. *tds chora de saudade*

    Beijos.

    ResponderExcluir
  5. Adorei *-* Muito mais prático, o que uso eu tenho que arredondar as imagens no PF, além de ser um código enorme! Gostei mesmo, vou usar com certeza!
    Kisses amore :*

    goimagines.blogspot.com

    ResponderExcluir
  6. Salvou meu layout Emily. Muito obrigada, o tutorial está ótimo!
    Bjs
    garota-unbroken.blogspot.com

    ResponderExcluir
  7. Adorei o tuto!
    Demais Emily!
    passa la?

    http://blog-da-byaa.blogspot.com

    ResponderExcluir
  8. Gostei muito do tutorial. E por incrível que pareça oque eu achei que mais deu um toque diferente foi o código para tempo de transição!

    http://all-reserved.blogspot.com/

    ResponderExcluir
  9. Legal o tutooo..
    Passando só desejar uma boa sexta Feira!!

    Xoxo
    http://karenbarbiepink.blogspot.com
    Link do sorteio
    http://karenbarbiepink.blogspot.com/2011/12/sorteio-o-primeiro-de-varios-em.html

    ResponderExcluir
  10. Adorei o tuto

    Beijão
    Ana
    meninasantenadas.tk

    ResponderExcluir
  11. Adorei o tutorial, o incrível é que tudo que você ensina fica tão fácil *-*
    Pretendo usar no meu próximo layout, quem sabe..
    Enfim, eu adorei, beijos e um feliz 2012 (bem atrasado, eu sei) pra você também!

    http://cherry-teen.blogspot.com/

    ResponderExcluir
  12. Emily, seus tutoriais são os melhores. Dá pra entender muito bem, é tudo explicado e o resultado fica ótimo, assim como esse =)

    Beijos, Danielle - onthefame.blogspot.com

    ResponderExcluir
  13. Adorei o efeito *-*
    Deixa a Elite bem diferente, vou tentar fazer no próximo lay :) Mais uma vez arrasando nos tutos ♥
    beijos,
    www.otherthingsattitudeincluded.blogspot.com

    ResponderExcluir
  14. Fofa, posso te pedir uma opinião? Esse é o próximo lay que eu quero colocar: http://onthefame-testes.blogspot.com/
    Poderia me dizer o que acha dele, qual sua opinião? Seria muito importante pra mim =)

    Beijos mil. Dani.
    onthefame.blogspot.com

    ResponderExcluir
  15. Oii Emily! Aqui, ameei aqui! Ameii esse tuto e todos os outros, estão me ajudando lá no meu blog... Aqui, to procurando alguém que possa me faalar, por favor me responda no blog:

    Qual o nome da fonte que você usou no cabeçalho ao escrever: extras-placefame.blogspot.com??

    Precisoo sbeer! to louca caçando... ME AJUUDA! BEIJÃAO!

    http://laara-teen.blogspot.com/

    ResponderExcluir
  16. Amei o Tuto Emily! Vou usar,tudo bem? haha Beijooos!

    http://girlsrepublic-s2.blogspot.com/

    ResponderExcluir
  17. Ai Que lindo Gostei *-* Vou fazer no meu kk'
    blogvous.tk

    ResponderExcluir
  18. Quando eu começar a ter afiliados eu vou usar.Emily sua linda *-* eu consegui abrir meu blog graças a você e seus tutoriais(E outros blogs também.O que seria de mim sem todos eles? Serviram demais cada coisinha que você fez aqui no blog, me ajudou muito.Obrigada mesmo (:

    ResponderExcluir
  19. Primeiraaa !
    Segue ? http://fashion-thi.blogspot.com
    Há ! Emily tenho um presente para vc , é só ir no meu blog .

    ResponderExcluir
  20. Oi. sou fã do seu blog viu .
    se desse pra voç fazer um tutorial de como esconder os texto igual ao seu do fins seria legal
    qe eu tou fazendo e abre sempre o mesmo quando eu faço :'( faz porfavor
    www.crazyinhtml.blogspot.com

    ResponderExcluir
  21. Amei este tutorial, pena que só vim descobri-lo depois que tirei as imagens do meu afiliados e passei a usar uma listinha, Beijos'
    http://universophotoscape.blogspot.com

    ResponderExcluir
  22. Oi, iaia como tah? Gostei mt do seu blog, poder ser parceira do meu ? http://blogonlyteenage.blogspot.com/
    Segueee

    ResponderExcluir
  23. Caramba, amei esse efeito Emily, usarei no próximo template.
    Passei um tempão sem passar por aqui mas tô lendo os tutos que eu não tinha visto, todos muito bons!
    Girls On-Line

    ResponderExcluir
  24. parece ser mt dificil mais dps nem é tanto! *-*
    amr tem post novo e visual inovado la no blog poderia comentar ?
    www.paradateen1.blogspot.com

    ResponderExcluir
  25. Antes de mais nada, queria te agradecer. Seu tutorial salvou minhas 'mudanças' no meu blog. Procurei em vários lugares como colocar uma imagem no Título do Post e não encontrava. Obrigada. Seu blog é muito bom! Vou adicionar aos meus favoritos :)

    Queria aproveitar e perguntar mais uma coisinha, hehe. Você por acaso sabe transformar esse Gadget de Arquivo feio do blogspot em um Arquivo/Calendário? :)

    Beijocas

    ResponderExcluir
  26. Flor, morri aqui! ahsuahsa Eu to procurando um tutorial aqui que não acho de jeito nenhum, me ajuda? eu queria um para separar os posts da página igual no seu blog (: e o outro para separar os widgets igual aqui também (:
    Se puder ajudar eu amaria Beeijos

    ResponderExcluir
  27. Eu tentei fazer, mas deu tudo errado :/ Não sei qual imagem usar!

    Um beijo, Paloma
    momamoraes.blogspot.com

    ResponderExcluir
  28. Nossa, seu blog é perfeito, amei aqui Emily! Me ajudou muito com os tutoriais! Esse tutorial é legal, pena que eu não uso imagens, hihi.
    Seguindo, segue o meu blog?
    Beijão, sweetmakeups2.blogspot.com

    ResponderExcluir
  29. Ai desculpa o comentário, não tinha lido sobre retribuir visitas! Desculpa mesmo...
    O tutorial é super útil, gostei!

    Beijos, sweetmakeups2.blogspot.com

    ResponderExcluir
  30. Emily desculpa incomodar mas o meu não deu certo

    ResponderExcluir
  31. Esse efeito é super legal!
    Quem sabe eu use no proximo design?
    Aah, o PT ta de lay novo! Ja viu?

    Bjs
    http://blogportalteen.blogspot.com

    ResponderExcluir
  32. Ameei aqui, o design é ótimo, sem falar nos posts! Parabéns pelo blog incrivel. Amei de paixão o tutorial. Seguindo aqui.

    Se puder passar no meu blog ficaria muita agredica. Se gostar pode segui-lo também!

    http://rosaschiclete.blogspot.com/

    ResponderExcluir
  33. Oii queria saber como você colocou esse espaço entre cada gadget será que poderia ensinar? Obrigada
    http://cherrysweetofficial.blogspot.com/

    ResponderExcluir
  34. Por Favor você poderia fazer um Tutorial falando como você fez aquilo com seu status e agradecidamente ? Como clica e depois abre em baixo ?

    ResponderExcluir
  35. Oooi, não sei se você se lembra de mim, eu sou a ana, dona do ser menina e do style teens... Pois é, eu deletei eles, e criei um novo blog, eu sigo aqui, pode dar uma passadinha lá, e seguir?
    Beijos
    http://cinderelaaocontrario-18.blogspot.com (em construção.. não se assuste! haha)

    ResponderExcluir
  36. olá você esta participando da enquete do meu blog que tem a seguinte pergunta Qual é o melhor blog teen do mundo,o vencedor ganhará um broche feito por mim para o seu blog! Beijo :*

    ResponderExcluir
  37. Adorie, Emily. Vou usar no meu novo lay, e creditar, claro! T
    Tô até criando uma página já com os créditos...

    jeito-inedito.blogspot.com

    ResponderExcluir
  38. Primeira : P
    Emily eu amo o Extras Place Fame , e sigo .
    Vc pode seguir o meu ?
    http://fashion-thi.blogspot.com

    ResponderExcluir
  39. Participa do mini concurso la do blog e ganhe 3 dias de dibulgação na barra lateral!
    http://tutoriar-oficial.blogspot.com
    bjbj,adorei o post!

    ResponderExcluir
  40. Efeito lindo, é sempre bom customizar o blog, mesmo que seja nos mínimos detalhes!

    Beijos,
    http://paraisodemenina.blogspot.com

    ResponderExcluir
  41. Emily, porque você não acaba logo com o PlaceFame??
    As férias já estão acabando e você não volta com o PF e deixa o EPF sem atualizações :'(

    ResponderExcluir
  42. Emily,não deu certo,tentei fazer 3 vezes e não deu ):
    Pode me ajudar? www.meninaimperfeita.tk

    ResponderExcluir
  43. oie adorei os tutos daquie sigam meu blog www.modernstyle7.blogspot.com

    ResponderExcluir
  44. o blog ta lindo bjo www.modernstyle7.blogspot.com

    ResponderExcluir
  45. Ótimo tutorial! Já estou usando.
    http://onlyafox.blogspot.com/

    ResponderExcluir
  46. Man! Perfeito! Usei!!
    http://encantosdeumaadolescente.blogspot.com/

    ResponderExcluir
  47. não funcionou o efeito fosco no meu :( Qual o problema? :*

    ResponderExcluir
  48. Estava procurando esse código e já estou usando no meu blog só que acrescentei bordas e efeito hover nas bordas e ficou muito legal também.
    Já está nos meus créditos.
    Obrigada por disponibilizar seus códigos.
    Abraços
    recantodafadaalice.blogspot.com.br/

    ResponderExcluir
  49. Adorei o tutorial,vou usar com certeza.
    Estou seguindo,amando e pretendo passar sempre por aqui.
    Visita,flor?
    http://www.garotaousada.com

    ResponderExcluir

Comentários como "o blog tá lindo, bjo" "to seguindo, segue de volta??" "ai que lindo o blog, retribui a visita/comentário?" serão ignorados. Por favor, leia a FAQ e as outras páginas internas antes de perguntar qualquer coisa.