1 Como colocar descrição dos autores no final dos posts do Blog - *magazine luiza* >

Como colocar descrição dos autores no final dos posts do Blog

Como colocar descrição dos autores no final dos posts do Blog
Alguns leitores me perguntaram como colocar uma descrição do autor do blog no final de cada postagem, da mesma maneira que fiz no mais recente template do Dicas Blogger. Vou tentar explicar, mas já adianto que o procedimento não é muito simples, sendo necessário ter conhecimentos em CSS.

Na imagem abaixo, vemos a minha descrição em um post recente: 

Como colocar descrição dos autores no final dos posts do Blog
Descrição do autor
Vou ensinar um modelo um pouco diferente do que estamos usando aqui. Vamos lá?

Etapa 1:
Entre no HTML do template, clique em "expandir modelos de widgets" e cole o código abaixo ANTES  da tag  ]]></b:skin>

**Para encontrar a tag, dê um Crtl+F com seu teclado e cole ]]></b:skin>

**Para entrar no HTML, veja este post - Como editar HTML na nova interface 

/* Autores
----------------------------------------------- */

#post-footer-autor {
width: 100%;
height: 77px;
background: #e6e6e6; /*Cor do plano de fundo*/
border: #ccc; /*Cor da borda*/
margin: 8px 0px 8px 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
border: 2px solid #ccc; /*Espessura da borda*/
}

#autor-img {
width: 64px; /*largura da imagem*/
height: 64px; /*altura da imagem*/
background: #fff; /*plano de fundo da imagem*/
float: left;
margin: 7px;

}
#autor-sobre {
padding-right: 5px;
margin: 0px;
}

#autor-sobre p{
font-size: 14px;
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #333; /*Cor do texto*/
}
#autor-sobre a{
color: #3d85c6; /*Cor dos links*/
text-decoration:none;
}
#autor-sobre a:hover {
color: #9A9A9A; /*Cor dos links ao passar o mouse*/
text-decoration:underline;
}
Se você tiver conhecimentos em CSS, é possível mudar as cores de plano de fundo, bordas, links e texto, conforme assinalei em vermelho.

Etapa 2: 

Depois, procure por  <div class='post-footer'> e cole ANTES dessa tag o seguinte código:

<!-- Resumo dos autores-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Nome do autor&quot;'>
<div id='post-footer-autor'>
<div id='autor-img'>

<img src='URL DA IMAGEM' style='border: 0px solid #fab805; padding: 0; margin: 0;'/>
</div>
<div id='autor-sobre'>
<p>
<b>Sobre o autor:</b>
Faça uma breve descrição. <a href='link'> Nome do link</a></p>
</div>
</div>
</b:if>
</b:if> <!--Resumo dos autores Final-->
Antes de salvar, faça as seguintes alterações: 
  • Em  Nome do autor, escreva o nome do autor que receberá a descrição exatamente como está nas postagens.
  • Em URL da imagem, coloque a url da foto do autor no tamanho 64 x 64.
  • Em Faça uma breve descrição, escreva algo sobre o autor.
  • Em link, coloque uma URL (pode ser de um outro blog, Twitter, Facebook e etc) e em Nome do Linkescreva o nome da página que está sendo linkada.
Atenção! Se o seu blog tiver mais de 1 autor,  repita a etapa 2 para cada um deles.

Se você não sabe como obter a URL da imagem, leia este post: Como hospedar imagens no Picasa

Clique em "visualizar" e se tudo estiver ok, clique em "salvar modelo"                                                                                                                                                                                                                                                                                                                        Gostou deixe seu comentário e mostre a outras pessoas, Compartilhe com seus Amigos nas redes sociais
Comentários
0 Comentários

Nenhum comentário:

Postar um comentário

Olá! muito Obrigando por ler meu Blog e também por se dispor a comentar meus posts. seja muito bem-vindo (a)! Importante! Muito obrigando, fique a vontade para interagir. mais lembre-se: Gentileza, Educação e boas maneiras servem também para a vidas nos blog..................

Voltar ao topo