Você já viu como Colocar link na assinatura do autor das postagens, agora vamos aprender como incluir no final de cada postagem uma assinatura automática do autor personalizada em forma de imagem.
Este recurso pode ser usado em blogs que possuem um único autor, ou em blogs que possuem vários autores.
Você pode criar sua assinatura usando o Photoshop ou outros programas editores de imagens, mas se preferir, poderá usar Geradores online como My Live Signature.
Para criar sua assinatura on line, acesse o site My Live Signature.
É muito fácil criar sua assinatura:
No Step 1 --> digite o nome
No Step 2 --> escolha a fonte.
No Step 3 --> escolha o tamanho da fonte.
No Step 4 --> escolha a cor da fonte e a cor de fundo.
No Step 5 --> escolha a inclinação da assinatura.
No final, depois de sua assinatura pronta, eu sugiro que você salve-a em seu pc. Clique com o mouse direito em cima da assinatura que você acabou de criar, e depois clique em "salvar imagem como".
Hospede sua assinatura em seu site preferido.
Agora vamos inclui-la no final das postagens no blog.
Vá em "Design » Editar HTML" , clique em "expandir modelos de widgets" e localize a linha:
<div class='post-footer'>
Dependendo de seu modelo de template, a linha acima pode estar da seguinte maneira:
<p class='post-footer'>
E cole o código da sua assinatura logo ACIMA dela:
<img src='ENDEREÇO-DA-IMAGEM-ASSINATURA' style='border:0px;'/>
Caso você queira incluir um link na sua imagem de assinatura,utilize este código:
<a href="LINK-AQUI"><img src='ENDEREÇO-DA-IMAGEM-ASSINATURA' style='border:0px;'/></a>
Caso queira alinhar a imagem á esquerda, á direita ou ao centro, você deverá acrescentar uma "div" de alinhamento. Vejamos:
div align='left' --> alinha à esquerda.
div align='right' --> alinha à direita.
div align='center' --> alinha ao centro.
Então você deverá escolher qual o alinhamento que deseja (left,right ou center) e incluir no código abaixo (no local onde está os "XXXX" )
<div align='XXXX'>
<---código da imagem aqui--->
</div>
Dica:
Se você quiser que imagem da assinatura apareça apenas na Página Interna (área do seu artigo), você deverá acrescentar uma condicional para oculta-la na home.Veja como fica:
<div align='XXXX'>
<b:if cond='data:blog.pageType == "item"'>
<---código da imagem aqui--->
</b:if>
</div>
Caso queira aprender mais sobre como ocultar ou exibir determinados elementos em determinadas páginas, leia o artigo:
• Ocultar Elementos em Página Específica
Blog com mais de 1 autor
Se seu blog possui mais de 1 autor, o código a ser colado deverá ser este:
<b:if cond='data:post.author == "AUTOR1"'>
<img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR1' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == "AUTOR2"'>
<img src='ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR2' style='border:0px;'/>
</b:if>
Se você tiver número maior que 2 autores, você pode repetir o bloco de código, para cada autor que quiser adicionar. Notem que separei o código referente a cada autor, em cores diferentes para facilitar.
Confiram como ficou esta assinatura:
Os creditos desse tutorial vai para Mundoblogger
0 comentários:
Postar um comentário