Menu de statistica Wa

Oizinho outra vez! Bom hoje trago um menuzinho que já foi pedido a um tempinho já, mas havia me esquecido de postar mas.... lembrei agora Yeeee!!!  Ele praticamente não tem efeitos, mas podem adicionar a graça dele é a imagem lateral, qual deixa muito gracioso. Esse menu eu utilizei no meu layout Wa, qual foi bastante pedido. Agora é só seguir o tutorial que é mais simples ainda. Brevia do menu: www:

Exemplo: Layouts Zero Zelo & Wa

1. Vá ate Modelo> Editar HTML e procure por ]]></b:skin acima dessa tag cole:

Códigos

/*Menu statisca
----------------------------------------------- */
.menuclass {
height: 10px;  /* Largura do menu */
width: 147px;  /* Altura do menu */
display: block; /* Exibir em bloco */
font-size: 8px; /* Tamanho da fonte */
color:#baaa90; /* Cor do texto */
text-transform: uppercase;
font-family: PF Arma Five; /* Fonte */
text-align: left; /* Alinhamente do texto */
text-indent : 4px;
margin-right: 144px;
margin-bottom: 1px;
padding: 3px; /* Margem interna */
background: rgba(238,223,199,.5);
border: 1px solid #ebe3d7; /* Borda */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-transition-duration: .80s;
}
.menuclass:hover {
text-indent : 37px;
color:#e58388; /* Cor do texto */
-webkit-transition-duration: .80s;
}
/* Imagem do statisca
----------------------------------------------- */
.menuimg {
height: 148px; /*Altura da imagem */
width: 48px; /* Largura da imagem */
border: 1px solid #d74951;
background:#e9e6de;
box-shadow: inset 0 0 16px #eee, 0 0 0px #ccc;
padding: 1px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.menuimg:hover {
-webkit-filter: contrast(1.2);
-webkit-transition:all 1s ease;
}

Agora salve!

2. Siga até Layout e abra um novo gadget de HTML/java script. Dentro dele cole o código abaixo:

Códigos

<img src="endereço da imagem" class="menuimg" align="right" />
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>
<div class="menuclass">Digite aqui</div>

◤Entendendo o código◥

• .menuclass: É a tag do menu de barras, ele já vem explicando os pedaços mais importantes do código.

• .menuimg: É o código da imagem lateral a altura da imagem deve ser um px maior do que do menu. EX: O menu esta com 147 px de altura, a imagem deve ficar com 148px de altura.

• endereço da imagem: Coloque o endereço/url/link da imagem.

• Digite aqui: Você coloca o texto que fiará dentro do menu, como nome, metas, pessoas online etc...