19.2.13

Tutorial - Afiliados em lista com hover

Olá, meus parisienses. Vocês viram que hoje estou postando bastante certo? Pois é, as aulas começaram para alguns mais as minhas já tinham começado faz um tempão só fui ir agora, por quê? Vai saber, ahaha. Enfim, o tempo agora aqui é curto, tento postar tudo o que quero logo de uma vez, para assim o blog não ficar desatualizado e meu tempo aqui se esgote. Mas eu estava procurando esse tutorial faz tempo e ele fica lindo em todos os tipos de afiliados. É o seguinte, ele não leva imagens nem muitas complicações. Ele apenas gira e tem uma sigla do seu blog ali, se quiserem ver clique aqui e vão até os afiliados. Créditos ao blog Catching Stars, que fechou.

PREVIEW


01. Vá ao HTML do seu blog e dê F3 após isso procure por ]]></b:skin> e cole o código do quote abaixo, acima disto:
.afiliado{
font-size:11px; /* tamanho da letra */
padding: 11px 7px 7px 7px;
width: 26px; /* largura, recomendo que não mudem */
display: inline-block;
height: 21px; /* altura, recomendo que não mudem */
font-family: arial; /* fonte */
text-align:center;
color: #fff; /* cor da letra */
text-shadow: 1px 1px 0 #b6c0c6;
background: #c7d1d8; /* cor do fundo */
text-transform: uppercase;
-moz-border-radius: 10px; /* bordas arredondadas */
-webkit-border-radius: 10px; /* bordas arredondadas */
border-radius: 10px; /* bordas arredondadas */
margin: 3px;
float: center;
-webkit-transition: 0.7s ease-out;
-moz-transition: 0.7s ease-out;
transition: 0.7s ease-out;
}

.afiliado a{ color: #fff; }
.afiliado a:hover{ color: #fff; }

.afiliado:hover{
background: #ab1d46; /* cor do fundo quando hover */
text-shadow: 1px 1px 0 #93193b;
-webkit-transform: rotate(-360deg); /* rotação */
-moz-transform: rotate(-360deg); /* rotação */
}
02.  Agora cole o código abaixo em um gadget de html/java.
<div class="afiliado" title='Postagem mais recente'><a href="/" target='_blank'>TMR</a></div>

6 comentários

  1. adorei esse efeito. quem sabe no outro lay né?. Muito bom o blog ;p
    visita :http://fabiolucas92.blogspot.com/

    ResponderExcluir
    Respostas
    1. Obrigada.
      Pois é... Quem sabe no próximo.

      Ah e visito sim, pode deixar.

      Excluir
  2. Que bonitinho *--* Acho que vou usar no meu próximo lay

    ResponderExcluir
    Respostas
    1. Aham, também achei lindo *-*
      Obrigada :333

      Excluir
  3. nossa que lindo vou usar ook ?
    http://cupcakescoloridoscc.blogspot.com.br/

    ResponderExcluir

O blog não é mais atualizado com novas postagens. Mas fique à vontade para perguntar algo do seu interesse, seja relacionado às postagens ou dúvidas que lhe inquietam, estou algumas vezes entrando no blog e certamente verei se tiver comentários pendentes. Obrigada pela visita, leitor!