Image Map

19.4.13

Menu para Afiliados


Bom Dia! Como estão? Hoje trouxe um tutorial que acho bem útil para quem possui afiliados no blog e gostaria de dar um "estilo" à este gadget. Neste tutorial iremos começar a usar o novo editor de HTML. Quando olhei de primeira achei bem complicadinho, mas é bem fácil de se usar. Ao longo do post irei explicando o que vocês devem fazer para encontrar os códigos, ok? Para verem como é o efeito clique aqui>> Prévia, e vá até o gadget Efeito para Afiliados. Bora pro tutorial? GO!



Para começar vocês devem procurar por ]]></b:skin> e colar acima dele o seguinte:
.rodaesobe{
-webkit-transition: 0s linear;
-webkit-transition: opacity 0.5s linear;
-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-transition-duration: 0.4s;
-webkit-filter: none; -webkit-transition:all 1s ease;padding: 3px;}
.rodaesobe:hover{
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
-webkit-transform: rotate(360deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
padding: 3px;
-webkit-filter:grayscale(1);
-webkit-transition:all 1s ease;}

Mas Ingrid, eu não consigo achar esse código no novo editor. Para você conseguir encontrar o código, você deve dar um clique dentro da área do HTML, colar o código e dar um Enter no seu teclado.  (EX).

Feito isso, abra um gadget de JavaScript e cole o seguinte:
<a href="Link do blog" title="Nome do blog"><img src="Link da Imagem" class="rodaesobe" /></a>
<a href="Link do blog" title="Nome do blog"><img src="Link da Imagem" class="rodaesobe" /></a>
<a href="Link do blog" title="Nome do blog"><img src="Link da Imagem" class="rodaesobe" /></a>

Neste post, eu fiz algumas imagens para afiliados para vocês usarem se quiserem.

15 comentários:

  1. Adoro esse efeito ^^
    ->http://trufa-de-menta.blogspot.com.br/

    ResponderExcluir
  2. Ai que fofo! Adorei! Bem legal >3<

    @Escrita de Cabeceira

    ResponderExcluir
  3. Ah flor, tem um tag para você lá no meu blog ^^
    ->http://trufa-de-menta.blogspot.com.br/
    Beeijos'

    ResponderExcluir
  4. Adorei *o* Salvei aqui! Beijos ♥
    Eii, tá rolando um game de divulgação lá no blog! Sei que é pequeno, mas poderia participar? :3 http://existem-fadas.blogspot.com.br/2013/04/game-qual-foto-eu-escolhi.html

    ResponderExcluir
  5. Nooooooossa, adoreeeeeei! Se um dia eu for mudar o efeito que já tá no meu, vou mudar pra esse u-u

    Seguiindo!
    release-ur-imagination

    ResponderExcluir
  6. Usei esse efeito maraa !! Estou usando :)

    http://www.photoscaperosa.blogspot.com

    ResponderExcluir
  7. Ameei o efeito! Coloquei :3

    lovers-of-gabs.blogspot.com

    ResponderExcluir
  8. usando haha
    docedeframboesa.blogspot.com

    ResponderExcluir