7 de abr de 2013

4

Tutorial: Lista de Afiliados em HTML


Yoo Pandas ^^ 
Como hoje é domingo, eu não quero deixar vocês na mão, terça tudo indica que não vou poder postar, ai eu vim hoje postar um tutorial útil, pra quem tem os afiliados na sidebar.
Domingo que vem, eu vou trazer um game que ainda estou pensando no tema, então acompanhem meus posts e o das outras blogueiras ta ??
O tutorial eu peguei lá no blog : Catching Stars ( Devidos créditos )
Boora ?? 



1. Abra sua caixa de pesquisa Browser (Ctrl + F ou F3) , e pesquise pelo código ]]></b:skin> , quando encontrar cole acima:

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: white; /* cor da letra */
background: #486d97; /* 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;
}

O que vocês devem modificar é só o que está em negrito.

2. Dando continuação ao tutorial, irei agora explicar o que terão de fazer para adicionar o efeito de rotação quando em hover. Basta que coloquem acima de ]]></b:skin> o seguinte código: 


afiliado:hover {
background: #ab1d46; /* cor do fundo quando hover */
-webkit-transform: rotate(-360deg); /* rotação */
-moz-transform: rotate(-360deg); /* rotação */
}
3. Depois, é só adicionar um gadget HTML/JavaScript e cole quantas vezes quiser:

<a href="URL"><afiliado>Sigla</afiliado></a>

                                                                                       



4 comentários:

Diario Dos Treze. disse... Best Blogger TipsAnswerBest Blogger Templates

Obrigada, eu queria mesmo.
Beijos:*
Ariane- www.diariodostreze.blogspot.com
Tem postagem nova,visita ?.

Lah Souto disse... Best Blogger TipsAnswerBest Blogger Templates

Obrigada Fofa, vou dar uma olhadinha!
Beijos e obrigada pela visita também!

;)

Victória disse... Best Blogger TipsAnswerBest Blogger Templates

Olá! Tudo bom?
Sou dona do blog Charming Girl e vim avisar que o blog voltou e agora com um novo layout e novos posts... Te espero lá!

Beijos, Victória.
www.mundopinkvicky.blogspot.com.br

Lah Souto disse... Best Blogger TipsAnswerBest Blogger Templates

Obrigada, vou ver lá. Beijinhos *-*