Eu mostrei JÁ Como colocar o Nome do Autor não Mensagem Abaixo fazer Titulo , ASSIM Como mostrei Como Incluir UMA Biografia fazer autor do post não rodapé DO ARTIGO . Hoje Veremos Como Incluir UMA foto ao Lado fazer nomo fazer autor fazer post, abaixo do logotipo do titulo da postagem não blogueiro . Este Recurso e Bem Interessante e servir de para blogs Opaco possuem apenas hum autor, Bem Como parágrafo blogs Opaco possuem Diversos Autores. O Procedimento E SIMPLES, basta Seguir de Todos os Passos tutorial dEste. Primeiro teremos Opaco localizar e apagar hum Trecho de codigo e los SEGUIDA colocar o "Postado por" abaixo do Título do post. Vejamos proceder como, a Seguir.
Vale lembrar Opaco, è sempre recomendável Fazer hum backup de fazer Seu modelo Antes de Realizar quaisquer modificações.
1 º Passo - localizar e apagar Código:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'> <data:post.author/> </ span>
</ A>
</ Span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'> <data:post.author/> </ span>
</ Span>
</ B: if>
</ B: if>
</ Span>
Se estiver usando modelo Padrão fazer blogger Designer de Modelo, o Código Devera Estar da MESMA forma Opaco ESTA o Código Acima. Caso esteja usando template Mínima UO Modificado, o Código Podera Estar ASSIM:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'> <data:post.author/>
</ Span>
</ B: if>
</ Span>
Agora Que Você. localizou o Código, Apague TODO elemento.
Se figado dificuldade de para localizar o Código INTEIRO, TENTE localizar a 1 ª Linha:
<span class='post-author vcard'>
PoDE Ser Que No Seu Modelo de template Este Código SEJA repetido 2 Vezes, portanto, eu Recomendo Que Você. localizar O codigo e substitua O CODIGO 2 Vezes.
2 º Passo - colocar o nomo fazer autor do post abaixo fazer Título
Agora adquirir POR:
<div class='post-header-line-1'/>
e cole logotipo abaixo Linha desta, o seguinte Código:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</ A>
</ Span>
<b:else/>
<span class='fn'> <data:post.author/> </ span>
</ B: if>
</ B: if>
</ Span>
3 º Passo - Incluir uma foto do autor ao Lado fazer nome:
Agora devemos Incluir o Código that mostrará uma foto e fazer nomo autor do blog. Procure tag Pela:
<span class='post-author vcard'>
E logotipo abaixo dela, cole o seguinte Código:
<div class='autor-info'>
<B: if 'dados: post.author == "= cond AUTOR "'>
<span class='author'> <a href = " LINK-AUTOR "> <img src =" ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR "/> </ a> </ span>
</ B: if>
</ Div>
No Código Acima, no Campo de para Incluir o Nome do Autor, DEVE Ser Escrito de forma Exata. DEVE ESTAR exatamente Igual um that Aparece nsa mensagens. Se por incluido de forma Diferente, o blogger Localidade: Não reconhecerá o nome é NEM a Imagem EO Código Localidade: Não funcionar Vai, portanto, se Você. EUA sândalo Caractere não Seu Nome de Perfil, Devera inclui-lo, Nao esqueça! Feito ISSO, uma foto que autor do post aparecer Vai ao Lado do "postado por" e abaixo do titulo da postagem. Obs:. Cuidado com o tamanho da Imagem Opaco Você. Vai USAR, o USAR COM UMA ideal Imagem e não Máximo 40px 40px de Altura e de LARGURA.
4 º Passo - Estilos aplicar CSS:
APOS Incluir o Código html, Você. PODE Incluir Estilos atraves do CSS.
Procure tag Pela ]> </ b: skin> E Acima dela, cole o seguinte Código:
Procure tag Pela ]> </ b: skin> E Acima dela, cole o seguinte Código:
. Autor-info {margin: 10px 0 10px;}
. Img {autor
padding: 0; float: left;
border: none;
margin: 10px 0 10px 0;
width: 40px; / * LARGURA da Imagem * /
height: 40px; / * Altura da Imagem * /
border: 1px solid # ccc; / * borda * /
}
. Pós-autor {
color: # 333; / * cor da Fonte * /
font-size: 15px; / * Tamanho da Fonte * /
font-weight: normal;
}
. Pós-autor a {color: # 333; / * Cor do link de * / }
Blogs com Mais de hum autor:
Repita TODO o Procedimento fazer 1 º Passo (localizar e apagar Código).
Agora adquirir POR:
<div class='post-header-line-1'/>
e cole logotipo abaixo Linha desta, o seguinte Código:
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn'>
<a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
<data:post.author/>
</ A>
</ Span>
<b:else/>
<span class='fn'> <data:post.author/>
</ Span>
<span itemprop='name'>
<data:post.author/>
</ Span>
</ B: if>
</ B: if>
</ Span>
Vamos repetir o Procedimento fazer 3 º Passo, a Só Opaco Neste Caso, usaremos hum Código Diferente, JA Que se Trata de blogs com Mais de um autor.
Iremos Incluir o Código that mostrará uma foto e Nome de Cada autor do blogue. Procure tag Pela:
Iremos Incluir o Código that mostrará uma foto e Nome de Cada autor do blogue. Procure tag Pela:
<span class='post-author vcard'>
E logotipo abaixo dela, cole o seguinte Código:
<div class='autor-info'>
<B: if 'dados: post.author == "= cond AUTOR1 "'>
<span class='author'> <a href = " LINK-AUTOR1 '> <img src = " ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR1 '/> </ a> </ span>
</ B: if>
</ Div>
<div class='autor-info'>
<B: if 'dados: post.author == "= cond AUTOR2 "'>
<span class='author'> <a href = " LINK-AUTOR2 '> <img src = " ENDEREÇO-DA-IMAGEM-ASSINATURA-AUTOR2 '/> </ a> </ span>
</ B: if>
</ Div>
SE VOCE Tiver NUMERO Maior Que da 2 Autores, Você. PODE repetir o 1 º bloco de Código, parágrafo CADA autor Que Quiser adicionar.
Feito ISSO, repita TODO o Procedimento fazer 4 º Passo (Incluir Código CSS ).
Nenhum comentário:
Postar um comentário