Menu para status em hover (01)

Oi oi, gente! *-* Tudo bem com vocês? Espero que sim. Eu não sei o que eu estou fazendo aqui, sendo que tenho um milhão de coisas a fazer ~rs. De qualquer forma, estou um pouco satisfeita por mim mesma, sinto que estou muito mais responsável com esse blog, e isso me alegra. Já tive muitos e muitos blogs, alguns, ao menos sem alguma postagem. Reparei isso só hoje, quando fui colocar em "ordem" o meu painel do blogger. Eu não tinha ideia do qual extensa era a minha lista de blogs inúteis.

Voltando ao nosso assunto principal, eu resolvi me arriscar a fazer um menu simples, daqueles que a gente usa para informar as coisas do blog, ou seja, um menu de status. Hoje em dia a blogsfera adotou bastante coisa que antes nem imaginávamos que poderia existir, como agenda de programação de posts e blá blá blá. Em relação do menu ele é bem básico e ideal para o que ele exerce. Fica bom em layouts com cores mais claras, neutras, ou em tons pastel, assim o menu se "ajunta" com o resto.~

Enfim, agora que vocês já sabem as características dele, vamos lá. Depois de abrir o modelo HTML do seu blog, procure por ]]></b:skin>. Depois de achá-lo, cole o seguinte código acima da tag procurada:

.status {
margin-top: 5px;
padding: 2px;
display: block;
font-size: 8px;
color: #cedfff;
text-shadow: 1px 1px 0 #f7f8ff;
text-transform: uppercase;
font-family: PF Arma Five;
text-align: left;
text-indent : 4px;
padding: 3px;
background-color: #edf0ff;
border-top: 1px solid #d5e3ff;
border-bottom: 1px solid #d5e3ff;
border-left: 3px solid #d5e3ff;
border-right: 10px solid #d5e3ff;
-webkit-transition: all .60s ease-out;
-moz-transition: all .60s ease-out;
-o-transition: all .60s ease-out;
transition: all .60s ease-out;
-webkit-transition-duration: .80s;
}
.status:hover {
border-right: 3px solid #d5e3ff;
border-left: 10px solid #d5e3ff;
text-indent : 37px;
color: #f7f8ff;
text-shadow: 1px 1px 0 #cedfff;
-moz-opacity:1.0; opacity:1.0;
-webkit-transition-duration: .80s;
}

Depois de salvar, vá no layout do seu blog, adicione um novo gadget e clique sobre Java/Script e cole o seguinte código:

<div class="status">&#9642;Alguma coisa aqui.</div>
<div class="status">&#9642;Alguma coisa aqui.</div>
<div class="status">&#9642;Alguma coisa aqui.</div>
<div class="status">&#9642;Alguma coisa aqui.</div> 

Bom, então é isso, pessoal, fiquem com Deus. Beijos ~xOXo~