Tutorial: Efeito lista blue

Olá queridos leitores, tudo bem por ai? Espero que sim, eu estou bem também caso alguém queria saber (ninguém quer, enfim). Hoje trouxe um tutorial pra vocês que encontrei no "Crazy HTML" É um efeito lista, ele é bem legalzinho, eu uso ele na página de goodies aqui no meu blog.

Quem quiser pedir algum tutorial ou algum utilitário, peça AQUI.

Bom, esse tutorial é mais usado em páginas, assim a sua página fica com um destaque diferente e além do mais fica muito bacana. Clique em "Leia Mais" para visualizar o passo a passo.


Primeiramente vai em modelo > clique em editar html e logo após isso da Ctrl+F para procurar pela tag </head>. Após encontra-la cole o código abaixo em cima da tag

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Mono' rel='stylesheet' type='text/css'/>
Assim que você tiver colado o código, procure por : ]]></b:skin> logo em seguida cole o código abaixo acima da tag encontrada

.efeito lista {background: #86D3CF; margin: 3px;padding: 3px;display: block;font-size: 9px;border-radius: 3px; text-transform:uppercase;font-size: 11px; font-family : 'Ubuntu Mono';-webkit-animation: vira 4s;-moz-animation: vira 4s;-ms-animation vira 4s; color:#000000;}
.cia a:hover{color: #ffffff; opacity:0.5;}  
Últimos passos, para aplicar o efeito cole o código abaixo em sua página:

<div class="cia">
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
<a href="LINK">Lista</a>
</div>

O tutorial é bem simples e fica com um efeito muito legal, espero que tenham gostado e até o próximo post galerinha. Beijos ♥

4 comentários:

  1. Tava procurando esse tutorial que vi em outro blog, haha.. Valeu aí!

    ResponderExcluir
  2. Adorei o tutorial, obrigada pela mãozinha!

    Beijos,
    utevo-lux.blogspot.com

    ResponderExcluir

- Obrigado pela visita e pelo comentário, não se esqueça de deixar o link do seu blog abaixo para que eu possa retribuir sua visita.

-Se for para criticar que seja logado, em anônimo sua opinião não valerá de nada.

 
Design e programação: Carol Mascarenhas
Confissões de um garoto - 2011 / 2015. Todos os direitos reservados Tecnologia do Blogger