Agendinha Para Blog

Oee! Como vão leitores?! Gente não aguento mais ver equações ç-ç. Apesar de achar matemática meio fácil, já estou entediada de tanto x = blá blá. Mais enfim, agora que terminei a maioria das Tarefa/Trabalhos escolares posso me dedicar um pouquinho mais ao blog. Já faz um bom tempinho que não pratico html, css, e etc, e hoje peguei para praticar um pouco, e resolvi  tentar fazer algum menu ou algo assim, acabou saindo uma agendinha para postagens ou qualquer outra coisa que vocês possam imaginar para usar essa agendinha. Fiz ela em apenas quatro cores, mais quem entende um pouquinho dos *Códigos* pode muda-los facilmente para as cores desejadas. Em questão do debate que já estou enrolando muito para trazer a vocês eu ainda não decidi sobre o que escrever, a muitas escolhas de temas bem polêmicos atuais, enfim vou pensar mais um pouco, enquanto isso continuem lendo essa postagem, e espero que gostem  ❀(*´◡`*)❀

Click para ver o preview

1º- Vá em Modelo >>> depois click em editar HTML, click na caixinha, e depois pressione Ctrl + F, procure por ]]></b:skin> acima dessa tag cole o código do menu de sua preferencia:

Menu Azulzinho

#agenda {
background: #ccf0f8;
width: 100%;
height: 10px;
float: left;
font: 11px Verdana;
color: #55b5ca;
padding-left: 4px;
padding-bottom: 6px;
padding-top: 4px;
text-align: justify;
margin: 1px;
border: 1px solid #78d2e9;
box-shadow: inset 0px 1px 9px #93e2f3;
-webkit-transition-duration: .30s;
}
#agenda:hover {
background: #fff;
width: 100%;
height: 10px;
float: left;
font: 11px Verdana;
color: #ccc;
border: 1px solid #ccc;
box-shadow: inset 0px 1px 9px #e8e8e8;
-webkit-transition-duration: .50s;
}

Menu Rosinha

#agenda2 {
background: #ffd1de;
width: 100%;
height: 10px;
float: left;
font: 11px Verdana;
color: #d9869d;
padding-left: 4px;
padding-bottom: 6px;
padding-top: 4px;
text-align: justify;
margin: 1px;
border: 1px solid #d9869d;
box-shadow: inset 0px 1px 9px #eea0b6;
-webkit-transition-duration: .30s;
}
#agenda2:hover {
background: #fff;
width: 100%;
height: 10px;
float: left;
font: 11px Verdana;
color: #ccc;
border: 1px solid #ccc;
box-shadow: inset 0px 1px 9px #e8e8e8;
-webkit-transition-duration: .50s;
}

Menu Roxinho

#agenda3 {
background: #dfb7fe;
width: 100%;
height: 10px;
float: left;
font: 11px Verdana;
color: #ae7fd2;
padding-left: 4px;
padding-bottom: 6px;
padding-top: 4px;
text-align: justify;
margin: 1px;
border: 1px solid #ae7fd2;
box-shadow: inset 0px 1px 9px #c99aed;
-webkit-transition-duration: .30s;
}
#agenda3:hover {
background: #fff;
width: 100%;
height: 10px;
float: left;
font: 11px Verdana;
color: #ccc;
border: 1px solid #ccc;
box-shadow: inset 0px 1px 9px #e8e8e8;
-webkit-transition-duration: .50s;
}

Menu Verdinho

#agenda4 {
background: #caf09d;
width: 100%;
height: 10px;
float: left;
font: 11px Verdana;
color: #9dc46e;
padding-left: 4px;
padding-bottom: 6px;
padding-top: 4px;
text-align: justify;
margin: 1px;
border: 1px solid #9dc46e;
box-shadow: inset 0px 1px 9px #b3da85;
-webkit-transition-duration: .30s;
}
#agenda4:hover {
background: #fff;
width: 100%;
height: 10px;
float: left;
font: 11px Verdana;
color: #ccc;
border: 1px solid #ccc;
box-shadow: inset 0px 1px 9px #e8e8e8;
-webkit-transition-duration: .50s;
}

2º- Em um gadget de HTML/JavaScript, cole os códigos abaixo, editando as partes sublinhadas.

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

Obs: Em "agenda" troque pelo titulo da cor escolhida ( 2,3 ou 4 ).