20 de jan de 2013

Menu Eat Colors

Olá Anjos!

Vou tirar alguns blogs dos afiliados e deixar apenas os afiliados mais presentes ou que eu gosto. Um dos motivos de de eu não gostar de afiliações é que a pessoa que pede nunca mais volta no blog. É sério gente, não quero só encher minha elite de blogs que eu também nem visito.

Deixando minha irritação de lado, trouxe um menu chamado Eat Colors, do Tumblr. Talvez esse menu seja o ultimo que trago essa semana, pois vou me concentrar em postar utilitários. O problema é que meus programas de edições de imagens demoram tanto para abrir que eu desanimo de fazer alguma coisa. 
Enfim, o menu é do Tumblr JOH e estou ensinando aqui. Ele fica mais bonito se for colocado um debaixo do outro, mas a configuração padrão dele deixa os links um ao lado do outro.


1-ACIMA de /b:skin, cole:
/***Menu Eat Colors por pequena-magoa se usar credite***/
un {font-family: verdana; letter-spacing: 0px; font-size: 11px; line-height: 13px; display: inline-block; background: #FFF5EE; color: #4f4f4f; width: 33px; padding: 5px; margin: 1px; text-align: center; text-transform: lowercase; -webkit-transition-duration: .40s;}
un:hover {font-family: verdana; letter-spacing: 1px; font-size: 11px; line-height: 13px; display: inline-block; background: transparent; color: #000; width: 33px; padding-left: 0px;}
a.rosa {background: #8B668B; padding: 5px;}
a.rosa:hover {background: #FFE4E1;}
a.azul {background: #8B668B; padding: 5px;}
a.azul:hover {background: #ADD8E6;}
a.verde {background: #8B668B; padding: 5px;}
a.verde:hover {background: #9BCD9B;}
a.roxo {background: #8B668B; padding: 5px;}
a.roxo:hover {background: #D8BFD8;}
a.laranja {background: #8B668B; padding: 5px;}
a.laranja:hover {background: #FFA54F;}
a.coral {background: #8B668B; padding: 5px;}
a.coral:hover {background: #FFA07A;}
a.cinza {background: #8B668B; padding: 5px;}
a.cinza:hover {background: #5F9EA0;}
a.ouro {background: #8B668B; padding: 5px;}
a.ouro:hover {background: #DAA520;}
Mude o que está em negrito.


2-Cole em um Gadget de HTML/JavaScript o seguinte código:

<a class="rosa" href="LINK" title="NOME DO LINK"><un>One</un></a>
<a class="azul" href="LINK" title="NOME DO LINK"><un>Two</un></a>
<a class="verde" href="LINK" title="NOME DO LINK"><un>Three</un></a>
<a class="roxo" href="LINK" title="NOME DO LINK"><un>Four</un></a>
<a class="laranja" href="LINK" title="NOME DO LINK"><un>Five</un></a>
<a class="coral" href="LINK" title="NOME DO LINK"><un>Six</un5></a>
<a class="cinza" href="LINK" title="NOME DO LINK"><un>Seven</un></a>
<a class="ouro" href="LINK" title="NOME DO LINK"><un>Eight</un></a>
Coloque o link e o nome do link nos locais indicado. Feito isso é só salvar. Espero que gostem!


2 comentários:

  1. Eu eliminei os afiliados que nunca aparecem por lá, acho chato pedir afiliação e depois nunca mais aparecer no blog.
    Achei o menu bem fofo! Fica lindo quando se usa num template mais elaborado!

    ResponderExcluir
    Respostas
    1. Também acho, deixei só os afiliados que eu gosto :3

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!