Tutorial: Menu Afiliados + Modelos

Bom dia pessoinhas *-* Desejo um ótimo domingo pra vocês, espero que todos estejam bem :)

Hoje, trouxe um tutorial bem fácil, e todo delicadinho. Achei super fofo, é um menu de afiliados, e quando passa o mouse, muda a cor, é super fofo. Espero que gostem. Continuem lendo...

Cole o código desejado dentro de um gadget de html/javascript. Edite o que quiser, trocando seulinkaqui pela url que desejar e nome do afiliado pelo que quer que apareça no menu.

1.

<style>

#menutags22{

background-color: #ececec;

width: 100%;

height: 11px;

float: left;

border: 1px solid #d9d9d9;

color: #a2a2a2;

padding: 1px 0 6px 0;

padding-bottom: 4px;

letter-spacing: 1px;

text-align: center;

margin: 0px;

text-transform: lowercase;

margin-bottom: -2px;

margin-top: 1px;

-moz-transition: all 0.2s ease-out;

-webkit-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

#menutags22:hover{

background-color: #58585d;

color: #dad7d7;

text-decoration: none;

border: 1px solid #4c4c50;

}

 </style>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

2

<style>

#menutags22{

background-color: #ececec;

width: 100%;

height: 11px;

float: left;

border: 1px solid #d9d9d9;

color: #a2a2a2;

padding: 1px 0 6px 0;

padding-bottom: 4px;

letter-spacing: 1px;

text-align: center;

margin: 0px;

text-transform: lowercase;

margin-bottom: -2px;

margin-top: 1px;

-moz-transition: all 0.2s ease-out;

-webkit-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

#menutags22:hover{

background-color: #fee4ec;

color: #c28598;

text-decoration: none;

border: 1px solid #ebbbca;

}

 </style>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

3.

 <style>

#menutags22{

background-color: #ececec;

width: 100%;

height: 11px;

float: left;

border: 1px solid #d9d9d9;

color: #a2a2a2;

padding: 1px 0 6px 0;

padding-bottom: 4px;

letter-spacing: 1px;

text-align: center;

margin: 0px;

text-transform: lowercase;

margin-bottom: -2px;

margin-top: 1px;

-moz-transition: all 0.2s ease-out;

-webkit-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

#menutags22:hover{

background-color: #f2f4e6;

color: #b1b49d;

text-decoration: none;

border: 1px solid #dcdecc;

}

 </style>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

4.

<style>

#menutags22{

background-color: #fff;

width: 100%;

height: 11px;

float: left;

border: 1px solid #d9d9d9;

color: #a2a2a2;

padding: 1px 0 6px 0;

padding-bottom: 4px;

letter-spacing: 1px;

text-align: center;

margin: 0px;

text-transform: lowercase;

margin-bottom: -2px;

margin-top: 1px;

-moz-transition: all 0.2s ease-out;

-webkit-transition: all 0.2s ease-out;

-o-transition: all 0.2s ease-out;

-ms-transition: all 0.2s ease-out;

transition: all 0.2s ease-out;

}

#menutags22:hover{

background-color: #dee1e2;

color: #929ea1;

text-decoration: none;

border: 1px solid #cfd5d7;

}

 </style>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

<a href="seulinkaqui" target="_blank"  id="menutags22">nome do afiliado</a>

Pra quem ainda não entendeu, NOME DO AFILIADO: Nome do seu afiliado, nome do blog.

SEU LINK AQUI: o link do blog do afiliado.

Espero que gostem, e que fique lindo esse menu no blog de vocês. Beijos