23 de agosto de 2015

Tutorial: Colocando menu de tags fofo no blog

Imagem de pink and kawaii

Olá pessoal, beleza? Hoje trouxe um tutorial muito simples pra vocês que eu achei no blog K-World, que é um blog muito fofo, cheio de tutoriais lindos. Eu achei esse bem legal pois é muito simples, basta copiar os códigos, colar e editar da forma que preferir. Vamos lá? Bora:
Primeiramente, para colocar qualquer um deles basta você ir em "Layout>Adicionar um Gadget> Código HTML" e colar o código no campo indicado, fazendo as alterações de seu gosto.
Opção 1:
CLIQUE EM "LEIA MAIS" PARA CONTINUAR.




<style>
.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menutags20{
background-color: #ffeaee;
width: 91%;
height: 11px;
float: left;
font: 11px arial;
color: #e6adb9;
padding: 2px 0 6px 0;
text-align: center;
margin: 1px;
margin-bottom: 4px;
border-top: 1px solid #f7d0d8;
border-bottom: 1px solid #f7d0d8;
border-left: 3px solid #f7d0d8;
border-right: 3px solid #f7d0d8;
text-shadow: 1px 1px 0 #fff2f4;
} </style>
<div class="esquerda">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>
<div class="direita">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
 
</div>
Opção 2: 
<style> 
.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menutags20{
background-color: #e9e9e9;
width: 98%;
height: 11px;
float: left;
font: 10px arial;
color: #a2a2a2;
padding: 1px 0 4px 0;
letter-spacing: 2px;
text-align: center;
margin: 1px;
text-transform: lowercase;
margin-bottom: 4px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#menutags20:hover{
background-color: #525252;
width: 98%;
height: 11px;
float: left;
font: 10px arial;
color: #dad7d7;
padding: 1px 0 4px 0;
letter-spacing: 2px;
text-align: center;
margin: 1px;
text-transform: lowercase;
margin-bottom: 4px;
}
 </style>
<div class="esquerda">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>
<div class="direita">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>
 Opção 3:
<style>
.direita { float:right; width:49%; text-align:justify; }
.esquerda { float:left; width:49%; text-align:justify; }
#menutags20{
background-color: #e9eef3;
width: 98%;
height: 11px;
float: left;
font: 11px trebuchet ms;
color: #b2bfcb;
padding: 1px 0 6px 0;
letter-spacing: 1px;
border-left: 1px solid #dae0e6;
border-top: 1px solid #dae0e6;
border-right: 1px solid #dae0e6;
border-bottom: 3px solid #ced5db;
text-align: center;
margin: 1px;
margin-bottom: 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}


 </style>
<div class="esquerda">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>
<div class="direita">
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
<a href="SEU LINK AQUI" id="menutags20">Nome</a>
</div>

Créditos: K-World
Related Posts Plugin for WordPress, Blogger...
© Manuella Castelan - 2012. Todos os direitos reservados.
Criado por: NOME DO Manuella Castelan.
Tecnologia do Blogger.