Menu Para Marcadores #3

Bom Dia!!! Essa semana teremos uma maratona com menu para marcadores, no total estou programando essa e mais duas postagens com esse menus sem contar com a postagem anterior que tivemos 6 tipos de menus para marcadores diferentes, então se tiver procurando esse tipo de menu é bem provável que encontre pelo menos um que você goste.

Os menus de hoje como os da postagem anterior também foram retirados do blog Kawaii World, mesmo ele não sendo mais atualizado ele tem bons tutorias. Previews.

Tutorial

1° Passo: Vá em Modelo > Editar HTML.

2° Passo: Procure por(Usando Ctrl+F): ]]></b:skin>

3° Passo: Cole acima de "]]></b:skin>" o código do modelo escolhido:
Modelo 1:

#tags{
background-color: #e5e1e7;
width: 56px;
height: 12px;
font-family: verdana;
font-size: 11px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
margin-bottom: 3px;
color: #b2a1ad;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px #dcd5df;
-moz-box-shadow:    inset 0 0 5px #dcd5df;
box-shadow:         inset 0 0 5px #dcd5df;
-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;
}
#tags2{
background-color: #ffe4ea;
width: 56px;
height: 12px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px #fdd7df;
-moz-box-shadow:    inset 0 0 5px #fdd7df;
box-shadow:         inset 0 0 5px #fdd7df;
color: #f7b0bf;
-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;

Modelo 2:

#tags{
background-color: #edeccf;
width: 56px;
height: 12px;
font-family: verdana;
font-size: 11px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
margin-bottom: 3px;
color: #c9c79a;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px #dfddb5;
-moz-box-shadow:    inset 0 0 5px #dfddb5;
box-shadow:         inset 0 0 5px #dfddb5;
-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;
}
#tags2{
background-color: #ffe4ea;
width: 56px;
height: 12px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px #fdd7df;
-moz-box-shadow:    inset 0 0 5px #fdd7df;
box-shadow:         inset 0 0 5px #fdd7df;
color: #f7b0bf;
-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;
}

Modelo 3:

#tags{
background-color: #ffecdb;
width: 56px;
height: 12px;
font-family: verdana;
font-size: 11px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
margin-bottom: 3px;
color: #f4b985;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px #f9e3cf;
-moz-box-shadow:    inset 0 0 5px #f9e3cf;
box-shadow:         inset 0 0 5px #f9e3cf;
-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;
}
#tags2{
background-color: #e3dbdf;
width: 56px;
height: 12px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 5px #e2d6de;
-moz-box-shadow:    inset 0 0 5px #e2d6de;
box-shadow:         inset 0 0 5px #e2d6de;
color: #b3999a;
-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;
}

4° Passo: Salve as Alterações.

5° Passo: Coloque nos Gadgets em que deseja colocar o menu:

<a href="seu link" id="tags">Texto</a>
<a href="seu link" id="tags2">Texto</a>
<a href="seu link" id="tags">Texto</a>
<a href="seu link" id="tags2">Texto</a>
<a href="seu link" id="tags">Texto</a>
<a href="seu link" id="tags2">Texto</a>

6° Passo: Altere os locais indicados e salve.

Espero que tenham gostado desse modelo de menu para marcadores *-*

Lembrando que todos eles são do Kawaii World.