Olá caros leitores do Amotrix, estamos aqui novamente com mais um tutorial sobre a plataforma Blogger, esse código possibilita que uma mensagem que você faz com imagem sim ou não abaixo de todos os artigos publicados dentro de seu blog, além de ser um ótimo código, você pode modificá-lo com o css.
1) Primeiramente você deve fazer em um blog de testes
2) Antes de nada faça um backup de seu template.
Então sem mais nem longas, vamos começar.
Entre no modo Editar HTML" → marque a caixinha "Expandir modelos de widgets", e procure por este código:
<div class='post-footer'>
Mostrando mensagem na página inicial
Caso você queira que a mensagem apareça na página inicial e dentro do artigo use esses códigos:
Cole acima:
(Somente texto)
<div id='finalpost'>
SEU TEXTO AQUI
</div>
(Texto com imagem ao lado)
<div id='finalpost'>
<img align='absmiddle' src='ENDEREÇO-DA-SUA-IMAGEM' style='width: 24px; height: 24px; float: left;'/>
SEU TEXTO AQUI
</div>
O código acima, está configurado para utilizar uma imagem no tamanho de 24x24.
Se for utilizar uma imagem maior, não se esqueça que você DEVE EDITAR os valores de "width e height", colocando o mesmo tamanho da imagem que está utilizando.
Salve e Pronto
Não mostrar a mensagem na página inicial
Caso você não queira que a mensagem apareça na página inicial do seu blog, é necessário que você use esses códigos:
(Somente texto)
<div id='finalpost'>
<b:if cond='data:blog.pageType == "item"'>
SEU TEXTO AQUI
</b:if>
</div>
(Texto com imagem ao lado)
<div id='finalpost'>
<b:if cond='data:blog.pageType == "item"'>
<img align='absmiddle' src='ENDEREÇO-DA-SUA-IMAGEM' style='width: 24px; height: 24px; float: left;'/>
SEU TEXTO AQUI
</b:if>
</div>
O código acima, está configurado para utilizar uma imagem no tamanho de 24x24.
Se for utilizar uma imagem maior, não se esqueça que você DEVE EDITAR os valores de "width e height", colocando o mesmo tamanho da imagem que está utilizando.
Salve e Pronto
Aplicar estilos para personalizar a mensagem:
Agora iremos adicionar o estilo CSS, para aplicar estilo a mensagem.Volte na aba "Design → editar html",e procure pela tag: ]]></b:skin>
e cole ACIMA dela:
#finalpost{
margin:20px 0px 20px 0px; /* distancia entre o texto e o post */
padding:10px 5px 10px 5px; /* edite se quiser */
font-size:13px; /* edite tamanho da fonte */
text-align:left; /* alinhamento do texto */
color: #XXXXXX; /* cor da fonte */
border: 1px solid #XXXXXX; /* coloque borda se quiser */
background: #XXXXXX; /* coloque cor de fundo se quiser */
}
Não se esqueça de modificar o código do css do seu gosto.