Mensagem ao lado do título do post

Olá! Hoje trouxe um tutorial de como deixar um texto pequeno ao lado do título do post. Me inspirei em alguns themes no Tumblr, onde ao lado da postagem aparece text, photo, quote, link, chat, audio ou video, descrevendo o tipo de mídia do post.


Vá na HTML de seu blog, procure (ctrl+F) por ]]></b:skin> e cole acima do que achar:

.littletext {
margin-left: -100px; /* Anda para a esquerda */
margin-top: -20px; /* Anda para cima */
background: #COR; /* Fundo */
border-radius: 5px; /* Bordas arredondadas */
text-align: center; /* Alinhamento do texto */
font-size: 10px; /* Tamanho da fonte */
color: #COR; /* Cor do texto */
width: 70px; /* Largura */
opacity: 0.6; /* Opacidade */
padding: 5px;
-webkit-transition-duration: 0.80s;
}
.littletext:hover {
opacity: 1.0;
}

Deve haver um sinal de menos (-) antes do número de margin-left e do número de margin-top para ficar posicionado corretamente.

Quando estiver tudo ok, salve.

Agora na primeira linha da postagem que queria usar isso cole:

<div class="littletext">
Escreva algo aqui </div>
<br />

Se estiver tudo certo, já pode usar! Espero que gostem.