sexta-feira, 12 de novembro de 2010

Como distinguir os autores dos posts num blog compartilhado





Sunhamos que temos um blog com vários autores e queremos distinguir uma postagem de um autor para outro. Podemos fazer isso colocando uma cor de texto para cada um, com uma cor de fundo ou imagem diferentes para cada autor do blog.

Como exemplo vamos usar nossos autores fictícios "Hypotenusa Pereira" e "Voltaire Rebelado de França" =)

1. Distinguir cada autor pela cor do texto de suas postagens:

Neste exemplo, os posts da Hypotenusa aparecerão com a cor rocha, enquanto que os do Voltaire aparecerão em azul. Primeiramente faça um backup do seu html para poder reparar caso ocorra algum erro.


a. Vamos em Design > Editar Html e expandimos widgets.

Antes de ]]></b:skin> colamos o código abaixo:


.post-body-Hypotenusa {
color:#ff0000;
}
.post-body-Voltaire {
color:#0000ff;
}


Visite a tabela de cores em CSS para colocar o cor que você quiser aqui http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm


Algumas linhas mais abaixo encontraremos:

<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<div class='post-footer'>


c.Adicionaremos a parte do código em vermelho para distinguir as cores para cada autor:

<div class='post-header-line-1'/>
<b:if cond='data:post.author == " zipi=""> 
<b:else/>
<div class='post-body-Zape'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>
<div class='post-footer'>

Clique em visualizar. Se estiver tudo ok salve.


Obs.: As cores das postagens antigas serão automaticamente trocadas;
Temos que escrever o nome de cada autor exatamente igual como aparece no perfil do blog;
Se tivermos mais de dois autores, iremos repetir o código anterior para cada autor antes do último
</b:if>, por exemplo, se tivermos um outro autor "Um Dois Três de Oliveira Quatro".

O primeiro código ficaria assim:

.post-body-Hypotenusa {
color:#ff0000;
}
.post-body-Voltaire {
color:#0000ff;
}
.post-body-Um {
color:#0000ff;
}


2. Distinguir cada autor pela cor de fundo se suas postagens

Os passos são os mesmos utilizados acima, a única diferença é que vamos adicionar o seguinte trecho:

.post-body-Hypotenusa {
background:#ddd;
}
.post-body-Voltaire {
background:#000;
}

Neste caso a cor de fundo para os textos de Hypotenusa serão cinza claro e para Voltaire preto; Visite a tabela de cores em CSS para escolher a cor que você quiser. Salve.


3. Distinguir cada autor com uma imagem de fundo

É igual ao passo anterior, só trocamos o código:

.post-body-Hypotenusa {
background: url(Endereço_da_imagen);
}
.post-body-Voltaire {
background: url(Endereço_da_imagen);
}Digite aqui o resumo do post

0 comentários:

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...