8.2.13

Elite de Afiliados com Efeito Giratório

Tumblr_mf2vesflcq1qfqm2lo1_1280_large
Ainw' >.<'
Yoo Amoras!!
~Boa tarde...
Tudo bem??
Finalmente consegui postar aqui no blog!! Eu estava totalmente sem tempo...
Bem, mas para "recompensar" hoje eu trouxe 2 tutos, é o efeito giratório que tem  2 modos de ser usado:

 Com uma imagem, que gira e mostra o nome do blog na tooltip;
  Igual ao do SM, que aparece a sigla do blog afiliado...
Quer aprender a fazer??

1º - Efeito Giratório com Imagem

Vá em "Modelo" >> "Editar HTML" >> Aperte Ctrl F ou F3 e proucre por:
]]></b:skin>
 Acima desta tag cole o seguinte código
.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);} 
Salve. Agora vá no layout de seu blog e adicione um gadget "HTML/JavaScript" e cole este código:
<a href="Link do Blog" title="Título do Blog"><img src="Link da Imagem" class="elite"/></a>
Edite as partes destacadas de azul.
Créditos: Kawaii World

Imagens:

Créditos: Kawaii World

2º - Efeito Giratório com Sigla

Vá em "Modelo" >> "Editar HTML" >> Aperte Ctrl F ou F3 e proucre por:
]]></b:skin>
 Acima desta tag cole o seguinte código
afiliado{
font-size:14px; /* tamanho da letra */
padding:5px;
width: 30px; /* largura, recomendo que não mudem */
display: inline-block;
height: 23px; /* altura, recomendo que não mudem */
font-family: arial; /* fonte */
text-align:center;
color: #fff; /* cor da letra */
text-shadow: 0px 1px 0px #6666;
background: #00bfff; /* cor do fundo */
text-transform: uppercase;
-moz-border-radius: 100%; /* bordas arredondadas */
-webkit-border-radius: 100%;  /* bordas arredondadas */
border-radius: 100%; /* bordas arredondadas */
margin: 5px;
padding-top: 12px;
-webkit-transition: 0.7s ease-out;
float: left;
-moz-transition: 0.7s ease-out;
transition: 0.7s ease-out;
}
afiliado:hover{
background: #ff69b4; /* cor do fundo quando hover */
-webkit-transform: rotate(-360deg); /* rotação */
-moz-transform: rotate(-360deg); /* rotação */
}
Altere todas as partes em negrito

Agora vá no layout de seu blog e adicione um gadget "HTML/JavaScript" e cole este código:
<a href="LINK DO BLOG"><afiliado>SIGLA</afiliado></a>
Pronto, é só alterar novamente o que está negritado e salvar!!
Créditos: Pequena Garota

Bem pessoal, é isso! Espero que tenham gostado ^^
Kissus~

14 comentários:

  1. Awn, que tutorial fofo! Adorei o post, o efeito fica lindo!
    Beijos,
    sonhosde-primavera.blogspot.com.br // mudamos de nome, url e layout!

    ResponderExcluir
  2. Que bom que você gostou do tuto Flor!
    Adorei o novo nome, e o novo lay do seu blog! ^^
    Kissus~

    ResponderExcluir
  3. Adorei! Usei mas só funcionou no meu blog de testes (bagunçado)>> testes-do-cc.blogspot.com.br
    Mas no meu blog não > cherrycupcakesz.blogspot.com.br
    Mas é a vida né?
    Bjs,

    ResponderExcluir
  4. É que depende do modelo que você usa, acho que só funciona no Travel...
    Ou é um erro mesmo!
    Kissus~

    ResponderExcluir
  5. Amei os Tutos. :3

    As Imagens também são bem fofas! ( Além de amar Bob Esponja, Ama também Rilakkuma, Né? )

    winter--rose.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que você gostou Flor...
      É, eu também amo Rilakkuma! ^^
      Kissus ^3^

      Excluir
  6. yonn~ótimo tutorial, e as imagens são tão me kawaiis ~-////w////-~ amei todas

    Adolescente Nerd

    ResponderExcluir
  7. Fico feliz que você tenha gostado!! ^^
    Kissus~

    ResponderExcluir
  8. Oii Flor aceita afiliação, amei o tuto :)) vou fazer (tentar rsrsr)
    meu blog se aceita ponha o meu como afiliado aki também ok bjinhos
    http://chocoonut.blogspot.com.br/

    ResponderExcluir
  9. Desculpe, não estamos aceitado afiliações... A elite já esta formada!! Fico feliz que tenha gostado do tuto... Kissus ^3^

    ResponderExcluir
  10. Amei d++ lindo
    http://cherry-and-star.blogspot.com.br/

    ResponderExcluir
  11. Lindo,peguei várias,beijo *3*

    http://bel-somostaojovens.blogspot.com.br/

    ResponderExcluir
  12. Olá , querida blogueira, eu sou Karina Silva postadora do S.O.S Best Friend!
    Estou com vagas abertas de afiliados se caso quiser e tiver interesse em se afiliar , estamos te esperando lá .

    Nome :
    Blog:
    Sigla:

    Para se afiliar é simples siga o blog e me ponha em seus afiliados também.
    PS: Não é necessário ter um monte de seguidores.

    Muá, Káh Silva.

    http://contatudosobrekarinasilva.blogspot.com.br/

    ResponderExcluir