Menu Time Moment

Yo! Yo! Yo meu amados bunnie's! Hoje o dia está meio corrido, mas para não deixa de postar venho trazer um tutorial rápido e pratico, ótimo para blogs que tem mais de um postador. É um menu que pode dizer o que está fazendo no momento, se está online postando ou se já saiu, assim os leitores podem mandar comentários sabendo que em breve serão respondido, é mais uma forma de poder interagir com os leitores, também pode ser usado para mensagem do dia.

1. Vá até o HTML do blog e procure por ]]></b:skin>  acima dele cole:

Códigos

.timemoment2 {
margin-right: 2px;
height: 43px;
color:#a9a7a70;
font: 8px "silkscreen", small fonts;
text-transform: uppercase;
text-align:left;
background: #fcfcfc;
border-right: 6px double #bedad1; /* Borda */
border-bottom: 1px solid #bedad1; /* Borda */
border-top: 1px solid #bedad1; /* Borda */
margin-bottom: 2px
}
.timemoment2:hover {
color:#a9a7a7;
margin-right: 2px;
height: 43px;
border-right: 6px solid #bedad1; /* Borda em hover */
}
.timemoment1 {
margin-right: 40px;
height: 43px;
color:#a9a7a7;
font: 8px "silkscreen", small fonts;
text-transform: uppercase;
text-align:left;
background: #fcfcfc;
border-left: 6px double #bedad1; /* Borda */
border-bottom: 1px solid #bedad1; /* Borda */
border-top: 1px solid #bedad1; /* Borda */
margin-bottom: 2px
}
.timemoment1:hover {
color:#a9a7a7;
margin-right: 40px;
height: 43px;
border-left: 6px solid #bedad1; /* Borda em hover */
}

Salve!

2. Agora vá em Layout e abra um novo gadget javascrip. Dentro dele cole:

Códigos

<img align="right" src="IMAGEM"/></a>
<div class="timemoment2">TEXTO</div>
<img align="right" src="IMAGEM"/></a>
<div class="timemoment1">TEXTO</div>

Salve e prontinho! Você pode editar e ate acrescentar efeitos, o que a criatividade mandar. Código criados por mim, se utilizar por favor credite.