segunda-feira, 15 de novembro de 2010

Como colocar foto e descrição do autor nas postagens





Com estas instruções podemos colocar ao  fim de cada postagem a fotografia do autor com uma breve descrição sobre sua pessoa. Pode ser usado para blogs que tem só um autor e também  para blogs com vários autores.




1. Primeiramente vamos em Design > Editar Html e clicamos em expandir modelos de widgets.

Agora, procuramos por  ]]></b:skin>. Copie o código abaixo e cole antes de:  ]]></b:skin>. 


#post-footer-autor {
width: 100%;
height: 70px; /*Altura da caixa de autor */
background: #669900; /* Cor de fundo da caixa */
margin: 8px 0px 8px 0px; /* Margens da caixa de autor */
border: 2px solid #ccc; /*Borde da caixa*/
}
/* Estilo do avatar */
#autor-avatar {
width: 54px; /* Largura do espaco para o avatar */
height: 54px; /* Altura do espacio para o avatar */
background: #ccc; /* Cor de fundo do avatar */
float: left;
margin: 7px; /* Margens do avatar */
}
#sobre-autor {
padding-right: 5px;
margin: 0px;
}
/* Estilo do texto da descricao */
#sobre-autor p{
font-size: 12px; /* Tamanho da fonte */
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;/* Cor do texto */
}
/* Estilo texto de enlace */
#sobre-autor a{
color: #9A9A9A; /* Cor do enlace */
text-decoration:none;
}
/* Estilo texto enlace al paso del ratón */
#sobre-autor a:hover {
color: #9A9A9A; /* Color enlace */
text-decoration:none;
}



2. Agora vamos procurar esta etiqueta: <div class='post-footer'>, caso não encontre procure por <div id='post-footer'> e cole após ele:





Alterações:

O código acima (etapa 2), seria só para um autor. Para colocar mais de um seria necessário repetir esse código de acordo com o número de autores do blog, depois trocamos os dados referentes a cada autor.
 Desta forma, a caixa só será visível após as postagens do autor. Para que ela apareça também na home do blog, apagamos a primeira linha do código: <b:if cond='data:blog.pageType == "item"'> e a última </b:if> do final.

 NOME DO AUTOR: Colocamos aqui, o nome do autor exatamente igual ao que aparece no nosso perfil do blog, ou seja, o nome que usamos na nossa conta para postar .


URL DA IMAGEM DO AUTOR: Colocamos aqui a imagem do nosso avatar, que deverá ter aproximadamente 50px por 50px.

DESCRIÇÃO BREVE DO AUTOR: Aqui escrevemos uma descrição breve do autor, usando a vista prévia para calcular o tamanho para que o texto não ultrapasse o espaço disponível.
Quando encontrar uma das duas, copie o código abaixo e cole antes da etiqueta encontrada este código:


 

21 comentários:

Candy Reis disse...

Olá ! por favor o meu deu tudo certo mas fica tipo assim:

FOTO. postado por clicana .23comentários .envie
marcadores: tal tal , ícones

eu queria que a foto ficasse do lado de marcadores também , não quero os marcadores abaixo da foto , fica estranho , saberia me dizer como fazer isso ?

agradeceria :]

Ju disse...

O meu não deu ceerto, fiz tudo certinho :S

Anônimo disse...

quando eu faço isso aparece esse erro depois de savlar bX-gh6763, o que eu faço?

Marcelo disse...

Olá, esses erros costumam desaparecer da mesma forma como aparecem, ou seja, do nada. A única coisa que você pode fazer é relatar esse erro no fórum do blogger e aguardar.
Abrçs.

Kurosaki Downloads disse...

ei no html do meu blog nao tem oke eu deveria procura entao???

Marcelo disse...

Kurosaki,

Clique em expandir modelos de widget.
Abrçs.

Kurosaki Downloads disse...

eu fiz todos os paços ate expandir so ke eu procuro os 2 codigos do 2 passo e nao axo nada nao tem como eu procura outra coisa nao ???

Marcelo disse...

Normalmente é um desses dois, que template vc usa?

Kurosaki Downloads disse...

eu uso um que baixei no site lol templates o template que baixei e do site Baixetudo Downlaods

Marcelo disse...

Então deve ser diferente, procure por algo como post-footer, que significa rodapé.

Abrçs.

Kurosaki Downloads disse...

Obrigado por tudo

JoÃoO™ disse...

Valeu cara me ajudou muito.
www.brizadesign.net

Victor disse...

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "p" must be terminated by the matching end-tag "

Vc pode me ajudar?

Marcelo disse...

Oi Victor,

Parece que ficou faltando a </p>

Abrç

Zélio Marulo Jr. disse...

No meu deu o seguinte erro:

Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag "
".

Que faço??

Marcelo disse...

Zélio, acredito q o problema tenha sido originado pela não interpretação da primeira linha do segundo código.

Caso vc já tenha salvo o primeiro, apenas coloque o segundo.

Ana Júlia disse...

oi, como faço para criar outro perfil , mas no mesmo blog, como uma equipe/?

Marcelo disse...

Oi Ana, está se referindo a essa descrição?

Alícia Kaline disse...

eu não consegui sair da parte 2,isso é para colocar como e aonde?? Por isso não deu certo!

Marcelo disse...

Oi Alícia, é depois.

Abrç.

Alícia Kaline disse...

Consegui fazer,mas gostaria de saber se no caso eu não quero colocar descrição, deixa o espaço em branco??

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...