Blog da Ketty: Tutorial: Menu Afiliados + Modelos

domingo, 20 de setembro de 2015

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





2 comentários:

Olá que bom que veio comentar aqui no Blog da Ketty!

-Sem chingamentos;
-Leio os comentários de crítica construtiva sempre;
-Deixe o link do seu blog;
-Se for reblogar deixe um aviso.

-Agradeço a atenção. Ketty.