Menu agenda

Oieee olha eu aqui de novo, sério? Grandes merda né? Como se fosse alguma novidade mesmo ¬¬, mas eu estou bem animada para postar todos os dias e enquanto eu estiver com ideias eu irei postar todos os dias sim! Sei que pode se algo meio cansativo ter posts todos os dias mas é que se eu não por em prática o que tenho em mente acabo esquecendo e dai as ideias legais vão para o brejo, nunca quase tenho ideias muito diferentes do comum dai quando crio algo legal e original que seja só meu eu tenho que postar no mesmo dia ou na mesma hora que vem a cabeça, posso até não postar no mesmo dia mas sempre crio a postagem de rascunho deixo salvo e quando dá um tempinho de sobra eu posto, não era acostumada a fazer isso pois sempre postava depois de dois ou três dias da postagem feita, então depois de uns tempos para cá mudei esse método e ficará assim ->.<-

Pois bem, mudando de assunto eu resolvi postar um menu agenda que criei para o blog da Cat o unicórnios purpurinados que é uma fofura só, o menu é simples mas muito fofo até já vi uns parecidos por ai mas o que fiz é mais elaboradinho pelas imagens em hover, não que os outros não sejam bons longe disso mas cada um tem seu estilo e jeito para criar efeitos não é mesmo? O modelo que irei postar aqui é muito fácil e prático de mexer, podendo mudar as imagens que vão ao lado do título, e dá para mudar as cores e o efeito hover, eu recomendo para quem não entende muito de códigos html não mexer nos códigos de base pois poderão deixar ele todo desalinhado, mexam apenas nas imagens e cores certo? Beijos doces amores e até mais outra ideia genial -^-^-

LIVE PREVIEW 【♥】

Vá até o modelo e clique em editar html, dentro procure por: ]]skin; acima dele cole o código abaixo:

.agenda {
background: #E3E4E8  url(http://static.tumblr.com/koam7dd/nvcn41wnf/marca3.gif) no-repeat left;
border: 1px solid #D0D5E0;
margin-bottom: 2px;
padding: 5px 5px 5px 20px;
font-family: Muli;
font-size: 10px;
color: #BABFC9;
text-align: left;
text-transform: uppercase;
text-shadow: 1px 1px 1px #fff;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
}
.agenda:hover {
color: #BABFC9;
text-shadow: 1px 1px 1px #fff;
padding: 5px 5px 5px 40px;
border: 1px solid #D0D5E0;
background: #E3E4E8 url(http://static.tumblr.com/koam7dd/uCOn41woq/seta13.gif) no-repeat left;
}

E para funcionar o menu, vá até layout crie um novo gadget html java script e dentro cole o código abaixo:

<div class="agenda">?/? - Breve</div>
<div class="agenda">?/? - Breve</div>
<div class="agenda">?/? - Breve</div>
<div class="agenda">?/? - Breve</div>
<div class="agenda">?/? - Breve</div>
<div class="agenda">?/? - Breve</div>