Menu de agenda - Exclusivo

Oi leitores, como vão? O Blog está quase chegando a 100 seguidores, caraca, nem sei como agradecer, a cada um de vocês, cada seguidor é muito importante pra mim ♥♥.

Decidi fazer um tutorial que acho que bastante gente procura, que é de como fazer um menu no estilo agenda. Você pode usa-lo como agenda ( óbvio ) assim como você pode usa-lo como um tipo de calendário, na verdade, pode usar como status também. Preview, 1º Gadget

Esse menu, eu apenas modifiquei a forma de 'locução' lol dele, não lembro aonde eu peguei o original, caso você souber me avise, ok?

Vá em seu HTML, pesquise por ]]></b:skin> e acima dessa tag, cole:

.menuagenda{

background: #eee;

font-family:Pf Arma Five;

font-size:8px;

text-align: center;

-webkit-transition: all 0.4s ease-out;

-moz-transition: all 0.4s ease-out;

padding:2px 0px 2px 10px; 

opacity: 1;

margin-bottom:4px;

border-right:0px solid #ccc; /* Cor da bordinha direita */

border-left:40px solid #ccc; /* Cor da bordinha esquerda */

}

.menuagenda:hover { 

border-right:40px solid #ccc; /* Cor da bordinha direita hover */

border-left:0px solid #ccc;  /* Cor da bordinha esquerda hover */

} 

.menuagenda a { 

color: #000; /* Cor do link */

}

Modifique apenas o que está em negrito. Agora, em um Gadget HTML/JavaScript cole:

<div class="menuagenda"><a href="link" > <strike>Nome do tutorial</strike></a></div>
<div class="menuagenda"><a href="link" >Nome do tutorial</a></div>
<div class="menuagenda"><a href="link" >Nome do Tutorial</a></div>
<div class="menuagenda"><a href="link" >Nome do tutorial</a></div>