Menu de sidebar: linear

Oi! Como vão? Estou pensando seriamente em mudar o dia de postagem para domingo, já que está se tornando rotina postar nesse dia. O que acontece é que no sábado ainda estou cansada demais da semana exaustiva na faculdade e acabo cochilando a cada dez minutos, sério. Eu posso estar fazendo qualquer coisa, mas se encostar em algum cantinho, apago. Esses dias dormi no metrô, minhas amigas têm fotos que comprovam. Mas não se enganem, estou cansada, mas muito feliz também. E falando em felicidade, estava vendo aqui e no dia 29 fazem exatos três anos de empire kawaii. Como o tempo voa! Eu ainda não tenho ideia do que trazer para comemorar com vocês, mas prometo pensar em algo. Well, como vocês não fizeram pedidos recentemente, resolvi trazer um menu de sidebar que chega a dar vergonha de tão simples, mas mesmo assim, é uma gracinha. Ele é meio que uma desculpa para vocês visitarem o agora reformado site de previews do blog, pois reformei tudo por lá, inclusive alguns efeitos. Espero que gostem. ﾐ

☆ live preview

No painel de controle do Blogger, clique em Tema e vá nas três bolinhas, escolhendo Editar HTML. Dê um clique dentro da área de código para localizar seu cursor, aperte Ctrl+F no teclado, pesquise por ]]></b:skin> e dê enter. Depois de ter encontrado, cole acima/antes o seguinte código:

.linear {
font-family: arial; /* fonte */
font-size: 11px; /* tamanho da fonte */
color: #adc0d2; /* cor da fonte */
text-align: center; /* centralização do texto */
text-decoration:none;
width: 54px; /* largura do menu */
height: 15px; /* altura do menu */
background: #fff; /* fundo */
border-bottom: solid 3px #adc0d2;
margin: 2px; /* espaço entre os links */
display: inline-block;
-webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
}
.linear:hover {
font-style: italic;
color: #fff;
border-bottom: solid 5px #c3d7df; /* cor da borda */
-webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
}

 Os códigos em negrito são as cores e dimensões do menu, que você deve alterar para condizer com a paleta de cores do seu layout.

No painel de controle do Blogger, clique em Layout, adicione um gadget HTML/JavaScript e cole o seguinte código:

<center><div class="linear"><a href="SEULINK">TITLE</a></div><div class="linear"><a href="SEULINK">TITLE</a></div><div class="linear"><a href="SEULINK">TITLE</a></div></center>

Por enquanto é só, nos vemos em uma próxima. Até lá, se cuidem e fiquem bem.