Como colocar assinatura com imagem no final dos posts

Essas assinaturas são muito úteis, principalmente para blogs que possuem equipes. Com elas, cada autor recebe um crédito maior pela sua postagem. São muito fáceis de aplicar, mas o tutorial é diferente para cada caso, confira:

1º Faça sua assinatura e hospede-a no Imageshack ou em qualquer outro site;

2º Vá em Design, depois em Editar HTML e marque a caixinha "expandir modelos de widgets";

3º Agora dê Ctrl+F e procure por:

<div class='post-footer'>

Se for só você que posta no blog, cole logo acima dele o seguinte código:

<div align='right'>
<img src='URL da Imagem' style='border:0px;'/></div>

Coloque a url da sua imagem na parte destacada do código. Depois visualize, se aparecer tudo certinho, salve.

Se mais autores postam no blog, o código é esse:

<div align='right'><b:if cond='data:post.author == &quot;ESCREVA_AQUI_O_NOME_DO_AUTOR1&quot;'>

<img src='URL da assinatura do 1º autor' style='border:0px;'/>

</b:if>

<b:if cond='data:post.author == &quot;ESCREVA_AQUI_O_NOME_DO_AUTOR2&quot;'>

<img src='URL da assinatura do 2º autor' style='border:0px;'/>

</b:if></div>

Faça as alterações nas partes destacadas. Depois visualize, se aparecer tudo certinho, salve. 

Alguma dúvida? Qualquer coisa é só perguntar. Beijos.

Personalize a data da postagem

vou ensinar como colocar a data do seu blog parecido com o do MN.

Eu disse "parecido" porque no MN a data fica pra fora da área do post, e explicar como eu fiz isso seria impossível muito difícil. Então, no seu blog, a data ficará ao lado do título do post, pode ser? Só mais uma coisa: esse tutorial vai mexer com vários códigos, portanto, faça as modificações com calma e prestando bastante atenção. Só por precaução, faça o download do seu modelo atual.

1. Vá em Configurações > Formatação > Formato da data e escolha a opção "20 Março 2011", como mostra a imagem ao lado (clique para ampliar). Depois vá até o final da página e salve as configurações.

Obs.: Essa é a data de hoje avá. Em outro dia a data vai estar diferente avá. Então o importante é só que esteja nesse formato (dia mês ano). 

2. Agora vá em Design, depois em Editar HTML, dê Ctrl + F e procure por:

</head>

e logo ABAIXO dele cole:

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>

Salve as alterações.

3. Agora marque a caixinha "expandir modelos de widgets"

Dê Ctrl + F e procure pelo seguinte código:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

pra facilitar a sua busca procure só pela primeira linha.

e logo ABAIXO dele acrescente:

<a expr:name='data:post.id'/>

Agora substitua essa linha:

<h2 class='date-header'><data:post.dateHeader/></h2>

por esse código:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

4. Agora é o último código! Procure por:

]]></b:skin>

e ACIMA dele cole:

#fecha {
color: #464646; /*Edite a cor da data*/
padding: 0px 0px 0px 0px; /*Altere as margens internas da data*/
margin-right:5px; /*Margem externa direita*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat;
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}

Espero que tenha gostado. Qualquer dúvida é só comentar. Beijos.