segunda-feira, 13 de agosto de 2012

Pedido da Leitora: Efeito nos Afiliados

necessito de ir nesse parque de diversões tirar uma foto nesse por do sol perfeito!

Oii, meus algodões doces!
Tudo bem?
Hoje venho com mais um pedido da leitora, quem pediu dessa vez, foi a fofa da Leh, do Garota Amargurada.
Ela pediu "efeitos na elite de afiliados", em cima do tutorial, temos os créditos, ok?
Brigada por pedir, Leh, espero que te ajude e ajude até mais gente!
Vamos lá:


Efeito Opacidade, créditos a Kawaii World:
Tutorial:

~~> Vá em Desing ~~> Adicionar um Gadget ~~> HTML/Javascript.
Cole esse código:

<a href="LINK DO BLOG" none;="" target="_blank" text-decoration:="" title="NOME DO BLOG"><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="LINK DA IMAGEM" /></a>&nbsp

Edite o que se pede e pronto!
----------------------------------------------------------------------------
Efeito Giratório, créditos de novo a Kawaii World


1. Procure por ]]></b:skin> e acima dessa tag cole:
.elite{ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width:auto; -webkit-transition-duration: 1.20s;
box-shadow: 2px 1px 2px #909090;
}
.elite:hover{-webkit-transform: rotate(360deg);} 
                         2. É só isso. Para usar você vai em um gadget de HTML/JavaScript e cola:
                         <a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>
---------------------------------------------------------------------------------------------------------------------
                                         Efeito Zoom, créditos a... adivinha quem?? Kawaii World!
                                     
                                             1. Procure por ]]></b:skin> e acima dele cole:

 .elitescale{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-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;
background-color: #e7a5de; 
padding: 3px;
}
.elitescale:hover {
-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);
background-color: #c4a6cb; 
padding: 3px;
}
                                                     Entendendo o código:




-moz-border-radius: 2px;
-webkit-border-radius: 2px;

Aumento o número se quiser que a borda fique ainda mais arredondada.

-webkit-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;

Aumente se quiser que demore mais até a imagem aumentar.

background-color: #e7a5de;

Cor da borda sem o mouse por cima.

-webkit-transform: scale(1.20);
-moz-transform: scale(1.20);

O quanto a imagem vai crescer. Aumente se quiser que ela fique maior ainda ou diminua se quiser algo mais sutil.

background-color: #c4a6cb;

Cor da borda com o mouse por cima.

padding: 3px;

Nota-se que existem dois desses dentro do código. O primeiro define o tamanho da borda sem o mouse e o segundo com. 
                                                      Cor da borda com o mouse por cima.

padding: 3px;

Nota-se que existem dois desses dentro do código. O primeiro define o tamanho da borda sem o mouse e o segundo com.
                                              No gadget Javascript, como em todos os tutos, cole:
<a href="Link do Blog" title="Nome do blog"><img src="link da sua imagem" class="elitescale"/></a>

-------------------------------------------------------------------------------------------------------------------
                              Gostaram do tutorial? Super fácil e dão um charme lindo na elite!
                                  Espero que tenha ajudado muita gente, principalmente a Leh!
                                                                        Beijinhos :*

 PS: A blockquote sempre bagunça meus posts, se o post estiver bagunçado, miil desculpas!













14 comentários:

  1. SHAUH que bloquote >< Legal ^^
    Nanda <3,a dona do 1º comment

    delicatepinkties.blogspot.com

    ResponderExcluir
    Respostas
    1. ASUAHUHSAUSAHUS, pois é, sempre que eu uso blockquote, eu clico umas cinco, quatro vezes e saí um monte de blockquote uma em cima da outra!
      Bom que gostou!
      Beijinhos!

      Excluir
  2. Muito legal o tuto ^^

    Beijiinhos ~ contagiadaspeloglitter.blogspot.com

    ResponderExcluir
  3. Adorei o tuto! Vou salvar aqui pra usar nas minhas encomendas :3
    Ótimo post!
    Beijinhos :*

    www.PiinkCookie.blogspot.com

    ResponderExcluir
    Respostas
    1. Bom que gostou, Paulinda!
      EEEEE, Paulinda diva!
      AUSHAUSHAUS
      Beijinhos!

      Excluir
  4. Quando for no parque, me avisa, iremos juntas (rsrs). ♥

    ResponderExcluir
    Respostas
    1. ????
      Acho que confundiu o post, haha'
      Beijinhos!

      Excluir
    2. Aaah, sim, haha', feliz aniversário adiantado, viu, Laurinda?
      Beijinhos!

      Excluir
  5. Onn'ttt Muuuitoooo obrigada Alifofa!
    Super gostei!! Vou usar,pode deixar que me ajudou bastante <3
    Beijinhos :*
    http://garota-amargurada.blogspot.com

    ResponderExcluir
  6. Awn, ajudou muito! Ótimo tutorial. As vezes o blockquote, também fica de mal comigo -q

    http://chassy-bomb.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ooonw, brigada, fico feliz que tenha lhe ajudado!
      Blockquote chata -q
      Beijinhos!

      Excluir

Olá, amores! Espero que tenham gostado do blog! Deem sua opinião do post, do blog e do designer, seguindo duas regrinhas:

*Nada de brigas ou xingamentos
*E divirtam-se

Beijinhos,
Ali.