Tutorial: Colocando menu de tags fofo no blog
Autor: Manuella Castelan | Publicado: 2015-08-23T18:47:00-03:00








Olá pessoal, beleza? Hoje trouxe um tutorial muito simples pra vocês que eu achei no blog&nbsp;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&gt;Adicionar um Gadget&gt; 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.










&lt;style&gt;.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;} &lt;/style&gt;&lt;div class="esquerda"&gt;&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;&lt;/div&gt;&lt;div class="direita"&gt;&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;&nbsp;



&lt;/div&gt;



Opção 2:&nbsp;




&lt;style&gt;&nbsp;



.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;



}



&nbsp;&lt;/style&gt;



&lt;div class="esquerda"&gt;



&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;



&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;



&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;



&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;



&lt;/div&gt;



&lt;div class="direita"&gt;



&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;



&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;



&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;



&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;



&lt;/div&gt;


&nbsp;Opção 3:



&lt;style&gt;
.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;
}


&nbsp;&lt;/style&gt;
&lt;div class="esquerda"&gt;
&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;
&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;
&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;
&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;
&lt;/div&gt;
&lt;div class="direita"&gt;
&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;
&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;
&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;
&lt;a href="SEU LINK AQUI" id="menutags20"&gt;Nome&lt;/a&gt;
&lt;/div&gt;



Créditos:&nbsp;K-World