Modelo para status

Hey e ai lindos? Hoje acordei sem ideia do que postar, então decidi reblogar estou pensando seriamente em fazer uma série de tutoriais aqui no blog, ensinando a personalizar o layout do seu blog para celular, mas é só um pensamento ainda. Hoje venho trazer um modelo para status, é como um mural com uma informação pequena e breve. Ótimo para blogs com muito movimento, e que quer ficar bem próximo de seus leitores. 

Brevia do modelo

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

Códigos

.novi { /*área do texto*/
width: 154px;
height: 50px;
background-color: #d470aa;
margin-left: 60px;
margin-top: 10px;
font-family: muli;
font-size: 16px;
color: #fff;
text-shadow: 1px 1px 0px #b347a1;
text-align: left;
text-indent: 5px;
border-radius: 5px;
box-shadow: 3px 3px 0px #fff;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.novi:hover { /*área do texto*/
background-color: #fff;
color: #2d3f73;
text-shadow: 1px 1px 0px #f7dacb;
border-radius: 5px;
box-shadow: none;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}
.novi p {font-size:14px;line-height:14px;}
.novi img { /*alinhamento da imagem em relação à caixa*/
width: 50px;
height: 50px;
position: absolute;
margin-left: -74px;
border: 1px dashed #fff;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
-ms-animation-duration: 1s;
}
.novi:hover img {
-webkit-animation-name: piscaporra;
-moz-animation-name: piscaporra;
-o-animation-name: piscaporra;
animation-name: piscaporra;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
-ms-animation-duration: 1s;
}
.novi:before { /*dá para definir a seta*/
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 2px solid transparent;
border-right: 16px solid #d470aa;
border-bottom: 8px solid transparent;
margin: 22px 0 0 -21px;
-webkit-transition-duration: .60s;
-moz-transition-duration: .60s;
-o-transition-duration: .60s;
transition-duration: .60s;
}

2. Salve! Agora vá em Layout e abra um novo gadget Java/script e dentro dele cole:

Códigos

<center>
<br />
<a href="/"><div class="novi"><img align="center" src="URL-DA-IMAGEM"/>NOME<br />TEXTO</div></a>
<a href="/"><div class="novi"><img align="center" src="URL-DA-IMAGEM"/>NOME<br />TEXTO</div></a>
<a href="/"><div class="novi"><img align="center" src="URL-DA-IMAGEM"/>NOME<br />TEXTO</div></a>
</center>
<br />

Edite as partes que se pede e salve. Se desejar personalize as cores, ao seu gosto. Créditos ao Chuva de HTML pela base e personalização.