Menu Dashed

Hoje vou ensinar como fazer um menuzinho dashed bem kawaii e so apertar em GO para ver o tutorial completo.

1. Vá até modelo > editar HTML, clique em qualquer parte da caixinha e pressione ctrl + F. Procure por ]]></b:skin> e acima dessa tag, cole o código que se refere à cor que você deseja:

#tags3{
background-color: #ffeef3;
width: 54px;
height: 11px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
border: 1px dashed #eab5c5;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 10px #fbe6ed;
-moz-box-shadow: inset 0 0 10px #fbe6ed;
box-shadow: inset 0 0 10px #fbe6ed;
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;
}

#tags3{
background-color: #dbe4ee;
width: 54px;
height: 11px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
border: 1px dashed #afbdcd;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 10px #d2dce7;
-moz-box-shadow: inset 0 0 10px #d2dce7;
box-shadow: inset 0 0 10px #d2dce7;
color: #a5b3c2;
-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;
}

#tags3{
background-color: #f7f0de;
width: 54px;
height: 11px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
border: 1px dashed #dbcea9;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 10px #f5eed9;
-moz-box-shadow: inset 0 0 10px #f5eed9;
box-shadow: inset 0 0 10px #f5eed9;
color: #d8c899;
-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;
}

#tags3{
background-color: #fae7d1;
width: 54px;
height: 11px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
border: 1px dashed #f2c692;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 10px #f9e4cc;
-moz-box-shadow: inset 0 0 10px #f9e4cc;
box-shadow: inset 0 0 10px #f9e4cc;
color: #e2b179;
-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;
}

#tags3{
background-color: #eceede;
width: 54px;
height: 11px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
border: 1px dashed #d3d7af;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 10px #ebeddb;
-moz-box-shadow: inset 0 0 10px #ebeddb;
box-shadow: inset 0 0 10px #ebeddb;
color: #c5ca94;
-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;
}

#tags3{
background-color: #e7e1eb;
width: 54px;
height: 11px;
float: left;
font-family: verdana;
font-size: 11px;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 3px;
border: 1px dashed #c8b8d0;
margin-bottom: 3px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 0 10px #e4dde8;
-moz-box-shadow: inset 0 0 10px #e4dde8;
box-shadow: inset 0 0 10px #e4dde8;
color: #b6a1c1;
-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;
}

2. Agora bastar colar o código abaixo em um gadget de HTML/JavaScript, editando o que for necessário:

<a href="seu link" id="tags3">Texto</a>
<a href="seu link" id="tags3">Texto</a>
<a href="seu link" id="tags3">Texto</a>

 

 Creditos:http://www.kawaii-world.net/2013/10/tutorial-menu-dashed.html#more